Web Development

Making web applications, HTML5, CSS3, JavaScript, PHP, MySQL, Apache, and other useful information

 There is a wealth of information to understand all the syntax of the commands and codes of these technologies and how they interact to produce dynamic content on websites and mobile apps but it is not impossible to learn enough to get started and make some pretty cool webpages. I intend to add posts here to be a quick reference for beginners and intermediate web developers. It won't be a full educational site by any means as there are many free educational sites which do a better job at teaching the in's and out's than I could accomplish! I mentioned some of these in my post The Beginner Programmer's Experience and as of the time of writing this are offered free of charge.
 Some things I need to note are that graphics and images are vital to creating engaging websites and apps. Though I do not anticipate posting much about creating gif animations, flash, photo manipulation. Although I use Linux and used to have a PowerMac, I am not going to discuss other operating systems other than Windows (most likely). If you like free, open source software as I do, GIMP is feature rich image editor but if you like professional software and the associated cost than Adobe's PhotoShop is one way to go. When it comes down to developing websites though, Adobe's DreamWeaver is top of the line. The cost is prohibitive for the beginner so I am currently using a program called PHPMaker.

 Before one can start developing anything, you have to set up the "environment". Simply put, this means downloading, installing, configuring and setting up the programs and tools that will be used to build the web pages. Every Windows version that is of Professional (i.e. not a home version or mobile version) has Internet Information Services (IIS) web server included but it is not what I would recomend using because the set up process is more complicated to add PHP capability and such. EasyWAMP is an installer that has Apache webserver, MySQL database, and PHP all in one and makes installation and setup much less time consuming. It also creates a nifty icon in notification area next to the clock that provides quick access to settings. Visit EasyWamp's website and download. Install once it has finished downloading and get it turned on and running. I won't go into how to install as the steps are easy to figure out and installation steps could vary over time which would just make my instructions obsolete any way! Plus, learning to read instructions found in the documentation will make you a more informed developer.

 Now that you have a working webserver complete with database and php, you can open a new browser tab or window and enter either 127.0.0.1 or localhost and hit Enter key to see the default file (index.html) that was installed be displayed. Now if it is not displaying, it is time for troubleshooting! Check to make sure Apache server is running first. If it is working, you are now able to use any word processor or even Notepad to write html files. Save them inside the folder named www with file extension .html (or .php if making Hypertext Preprocessor files). The default file for html is almost always index.html and the default file for php is almost always index.php and sometimes the default is named default.html or default.php. This can be customized in the .ini file of Apache if you wish to change it.
 Now the environment is set up, time to configure MySQL and which ever program(s) you're going to use to write html, css, javascript, php files with. This will vary in specifics but in general, you will connect to MySQL with username 'root', password by default is not set so this field will be empty, the port number by default is 3306, and the database name, well, first you need to create a new database so here is how to do that:
 Right-click on the WAMP icon in notification area and go to MySQL and right-click on MySQL Console. This will open a terminal window in which to enter commands to manage the databases and tables. It will prompt you for a Password, by default there is none set so just hit Enter. Then type,
create database NAME_DB_HERE;
using a name that you want instead of NAME_DB_HERE, remember to keep the name short and save your settings in a text file so you can easily recall them later if you should forget.Hit Enter key and then type,
grant all privileges on NAME_DB_HERE.* to "USER"@"HOSTNAME" identified by "PASSWORD"
replacing NAME_DB_HERE with your database name, replacing USER with root, replacing HOSTNAME with localhost, and replace PASSWORD with empty space or you can leave the identified by part out. The command should now look like this:
grant all privileges on NAME_DB_HERE.* to "root"@"localhost"
and hit Enter key. It should state database was created. If not, it's time for troubleshooting!
 Now that you have a new database, go back to your program and enter the database name and click connect or next or OK. You should now be able to start new project and have a blank workspace, ready to use! Don't forget to Save the project.