I want to build a website – how to?

This is a very common question. You may find this question on young students discussion boards as well as on business online forums from people that want to learn how to develop their small company website.

If you want to get e-busy and to start learning to develop websites I am happy to help you with some information. And also to give you an idea on how to improve your skills in time.

But first, I would like to give some quick tips for quick building an website/page(s) when you don’t have time to learn or you don’t have somebody to assist you.

1. Use online website building services

Quick and easy, you don’t have to know more than you already know on how to use your word processor or rich text editor. You only have to follow the visual icons and to read the help text.

Good for:
- static websites (no or limited dynamic content, text and pictures that you have to add manually)
- company/personal introduction
- informative content you may present to someone or to link in other websites
- quick content and quick website hosting (most of them offer hosting, free with ads on your page or paid hosting without ads)

Links to some of these services:
- Google Sites (free)
- Synthasite (free)
- Freewebs (free)
- OficialSiteBuilder (free+host&promote)
- Site2you
- Miniweb2
- Homestead
- 2csite

2. Use a WYSIWYG editor (software application)

Whether you are a computer guy or you are using the computer only for reports and documents you can easily learn to use this kind of applications. A WYSIWYG (What You See Is What You Get) website editor has visual and quite self explaining menus. You will be able to create your page(s) in no time. You will work on your computer (after installing the editor) and therefore it will be faster to save and manage your files. When you finish your site/page, you may consider looking for a web hosting provider (just google for web hosting).

Good for:
- static website/pages with some more customize possibilities
- learning web design terminology
- managing better your files and projects
- learning some HTML and JavaScript code if you decide to check the code behind the visual

Some WYSIWYG software:
- Kompozer (free)
- Dreamweaver
- CoffeCup HTML Editor
- NetObjects

3. Start web development training – you want to become a web developer

So, you want to start learning to develop websites. Good for you E-Busy.wordpress.com is here to help you with some magic tips and secret ancient knowledge

• Client side – server side

First, you have to know what is web development all about. Well, it’s easy, it’s all about an end-user computer (the user that browse on the Internet) with his/her browser (Internet Explorer, Firefox, other) and a web server (any website is hosted on a computer somewhere in this world into a datacenter).

client side = the user computer
server side = the web server

When one requests a web page on the internet, the page is processed by the server and sent to one’s browser over the internet network. So, the server side is processing and sending and the client side is receiving and displaying. So:

client side = the user computer = receives and displays
server side = the web server = processes and sends

Actually, the server side is not really processing if the page is flat HTML and JavaScript. Being the case, the server is only sending the file (the page) to the user browser, because the HTML and JavaScript code is processed only by the browser. By processing HTML we understand that the browser “reads” the HTML code, interprets it and displays the beautiful layouts with text and images you can see when you access a web page. For the browser, HTML code is like: “put a red square in the middle left, a blue text on top of it and this image at the bottom of the page”. You can learn HTML better by playing with some WYSIWYG editors and checking the code everytime you do something. But, remember, don’t stay too long with the visual, try to write the code by yourself. Also, start learning HTML here.

Ebusy.wordpress.com said another magic word in the paragraph above: JavaScript. “JavaScript is a scripting language most often used for client-side web development“, wikipedia says. E-Busy would like you to see JavaScript (JS is the abbreviation of JavaScript) as the language code for the browser to handle some interaction with the user. That’s because HTML is just a descriptive Markup Language for displaying purpose. Therefore, JavaScript is needed to process some limited user interaction. Like when you forget to fill in an input in a form and when you try to submit you get a message telling you to fill in the input. More about Javascript here. So we have:

client side = the user computer = receives and displays = HTML, JavaScript (some processing)
server side = the web server = processes and sends

What’s next? We have our pages, with all the texts and images, even with some cool JavaScript little actions and widgets. That’s great, now you can go and add hundreds and thousands of pages with your hundreds and thousands products or stamps! ABSOLUTELY NOT. E-Busy is now saying to you that if you want to add lot of content and interaction with your website visitors (like listing and sorting your products, building categories etc), ofcourse you can do it page by page, but trust my word: you don’t want to do that It’s a monstrous work and imagine you want in the future to change or update a detail you have on hundreds of pages.

So, for a few pages, with some static information and images, you may choose to build your website using only what you’ve just learned so far (HTML and JavaScript). But if you want a dynamic website, which you can easily change and update and interact with your visitors (like in a forum or an ecommerce website), you need to learn and use server side scripting. This means you have to learn and use a language like PHP, ASP.NET, Java or ColdFusion. Not all of them, ofcourse, one is enough (but later you might want to learn one of the others).

How do you choose what server side language to learn and use? It’s hard to say, but here are some help info: PHP is free, open source, solid, fast and with a very strong community. ASP.NET is from Microsoft, requires .NET platform, it’s solid, also pretty fast, and the actually language could be VB, C# or other supported by the .NET framework. Java (JSP) is from Sun, there are many solutions and frameworks, some free others commercial. ColdFusion is coming from Adobe, it’s simpler but not as powerful (so if you don’t need too complex projects could be just for you) except when coming to libraries and Java connections. But I will talk about each of them later in the article. For now, we know:

client side = the user computer = receives and displays = HTML, JavaScript (some processing)
server side = the web server = processes and sends = PHP, ASP.NET, Java, ColdFusion

And what about the data? A language is not storing any data. Instead we need a database. A database is a collection of data. Everything you need to store and reuse is going in the database. Like products, users info, categories etc.

The database is also on the server side. It’s connected to the server scripting language, meaning that you connect and query the database through the PHP, ASP.NET, Java or ColdFusion (or others). We will talk about MySQL, PostgreSQL and Oracle databases later in this article.

So, in the end, we have something like this:

client side = the user computer = receives and displays = HTML (layout code), JavaScript (some processing)
server side = the web server = processes and sends = scripting language (PHP, ASP.NET – VB/C#/other, Java, ColdFusion) = databases (MySQL, PostgreSQL, Oracle)

What else? Just one thing: your URL, the domain name. You may have your web hosting server, you may have your website pages and publish them on the server, but how will people know to visit your website? People need to open their browser and type in the address bar your web address (URL). So, you need one, a domain name. Like www.mydomain.com. For your domain name, you have to buy one from accredited providers, like any of your hosting provider or, let’s say, GoDaddy.com. It’s better to get your domain name from your web hosting provider because they will take care of all the settings needed to link the domain name with your website.

 

• PHP, ASP.NET, Java (JSP), ColdFusion (server side scripting)

Ok, now we have an idea about how this “website thing” works. We know that we should have a web server (“server side”) to host our website (pages). But you may need the hosting server only AFTER you finish the creation of your website, because you may (it’s better to) build your pages (and the website) on your own computer. eBusy.wordpress.com advises you not to edit your pages over FTP, unless you may have a little quick-urgent update in your code (but it’s not ok to do it this way).

When building a static simple website, it’s easy, you just use your editor (as the WYSIWYG ones), create your page(s) with the HTML code, save the file(s), and publish them in the end on your hosting server (you may publish -upload your files- with a FTP client, like CoreFTP or SmartFTP).

But how do we build a dynamic website?

Quite the same way We also have web pages (files), only that we have .php, .aspx or .cf extensions for the files. And a software HTTP server on the server like Apache (Unix OS) or IIS (Windows). And a server side script engine (to interpret the scripting language) like PHP, .NET, or ColdFusion. That’s because when you code in a programming language there should be an interpreting piece of software that “understand” and “translate”(process) your code. And they (the server side script engine pieces of software) should know which files to interpret and process (the .php, .aspx and .cf extensions reason).

For better understanding:

client (browser) -> requests page (URL address, like www.website.com/index.php or .aspx or .cf) -> Apache/IIS (server side, HTTP server) -> PHP/.NET/ColdFusion engine -> processes index.php page programming language code and queries the database (MySQL, Oracle etc)-> returns HTML code to the browser and display page

Don’t worry, you shouldn’t freak out At the beginning you should only order you webhost package with all the software included and to let them also to add your domain to the website. You will only upload your files with an FTP client and that’s it.

But first, as we already know, we need to build the website pages on our computers. Ebusy.wordpress.com, as an example, is an PHP application that once was built on some personal computer(s). Given the complexity it was sure built and upgraded on an Intranet network by the programming guys at WordPress. For programming the PHP website, which we now may call it application, one needs to have the HTTP server and the language engine on his/her own computer. That’s why you should install on your computer software packages in concordance to the scripting language you choose (it’s easy and you only need to read some documentation that comes with each of them). I will mention some packages for each programming language in the next list.

• PHP
  • advantages
    - full open source
    - free
    - stable, powerful, at 5th generation
    - great support community
    - lots and lots of libraries and solutions, free or commercial
    - easy to learn if you know some C or Java
  • disadvantages
    - not very easy to learn from scratch, but easier than C# or Java
    - complex (but this is also an advantage)
    - it still has to be improved as a full programming language
  • web server packages to use on your computer (including the HTTP server and languange interpreter and also database systems), for Windows (most of the Unix/Linux distribution have everything set up)
    - XAMPP (recommended by ebusy. wordpress. com)
    - WAMP 
  • documentation: http://www.php.net
• ASP.NET
  • advantages
    - you may choose which programming language supported by .NET Framework to use, like C# and VB
    - it’s Microsoft, so interacts well with any other MS product
    - fast, powerful, fully compiled (in two steps)
    - great support from Microsoft
    - good community
  • disadvantages
    - not easy to learn and use (PHP is easier)
    - it’s Microsoft, so there will be always something to pay for
    - not so effervescent community and code exchange
  • install .NET Framework on your computer to interpret the code locally and to use the MS best editors and applications
  • documentation: http://msdn.microsoft.com 
• Java (JSP)
  • I must say I’m not a Java guy (yet. Yes, I know, shame on me…) so all I can say is that Java is very powerful, it’s a language like C#, and you may choose from lots of frameworks and solutions: Hibernate, JPA,DAO, Spring, JSF, Spring WebFlow, DOJO, FLEX. Just google-it. I hope in the future I will have some more Java related posts.
• ColdFusion
  • advantages
    - easy to learn
    - easy to use
    - scripting mode
    - good Java interaction
  • disadvantages
    - not very powerful
    - not so good community
  • install ColdFusion package on your computer to interpret the code locally 
  • documentation: http://livedocs.adobe.com/coldfusion/8/htmldocs/ 

Disclaimer: It’s only a fast point of view of mine about the 4 technologies, you should look for more information as my opinions could be incomplete and unlike others’ opinions. 

 • Databases

I will be very short on databases. I recommend you to start with MySQL (http://www.mysql.com/) and little by little to start learning and use Oracle. For your projects, depending on the complexity and budget, you may choose MySQL as a free and easier but yet powerful RDBMS or Oracle which has free (Oracle XE) and commercial editions for very complex applications.

In fact, I recommend you to start with some database theory (http://en.wikipedia.org/wiki/Database , http://dotatmac.mcmaster.ca/home.htm , http://www.devarticles.com/c/a/MySQL/Introductory-Database-Theory-Systems-And-Design/ , and many others, just google-it ) and with some SQL theory.

As a last word, I think you need a good code editor software for writing your code. You may try and like: EditPlus, Eclipse, UltraEdit, Dreamweaver (also for design) and others.

 Happy coding!