As a versatile programming language, PHP is an almost essential tool in your skill set as a web developer. In this article, you’ll learn how to work with PHP locally, as well as a basic introduction to using PHP with MySQL.
Uses for PHP range from something simple such as reading information from a database (which you’ll learn in this tutorial), to running a blog like this one! Let’s get started!
A database is a mechanism that will organize your data for easy access and editing. Using a database with PHP has many benefits; you can easily update information in a database, you can access it from an infinite number of files, and many more. With regard to what we’re making, the primary benefit of having a dynamic portfolio is that once you have this set up, all you have to do is add a new row to your database for your portfolio to update.
The scope of the tutorial:
– a page that displays a portfolio of work
– a MySQL database that contains each project’s information
– a folder for all the images to be kept in and located from the database
– a PHP script that calls the MySQL database and pulls each project in
Note: I am assuming you have a basic knowledge of PHP (ex. how to use it, basic parameters, variables, etc). I will still explain it as best as I can for those that are unfamiliar with it/need to brush up.
Setting Up a Testing Environment
Running a PHP page on your computer locally isn’t as simple as just opening a file in your browser. Unlike HTML files, PHP requires you to run it on a server. You can get a web host that supports PHP, but unless you’re actually going to run a website, it’s not worth the money to subscribe to a web hosting company. For that reason, we’re going to install a local development environment that will allow you to open PHP in any browser.
There are lots of programs available that can set this environment up on your computer. The software I use is called WAMP (Windows, Apache, MySQL, PHP). I’ve tried others such as apache2triad, but I find that WAMP is quick to set up and easy to use.
After you have downloaded WAMP, go through the installation procedure. I installed my server in the my primary drive, which is C, but you can install it wherever you want. It will be accessed through the localhost call. Once the installation is complete, you can access the server from any browser of your choice. But before you do that, you have to start the service. Go into your Start Menu, and navigate to the WAMP Server folder. From there, click on Start WAMP Server.
Sometimes, the program itself is running but the service itself is not. Not to worry; all you have to do is click on the WAMP icon in your Windows taskbar, and press Start All Services.
Now that you have your WAMP server all set up, it’s time to test it. Type in http://localhost in the browser of your choice. If you see the main page, congratulations; you’re not all set to work with PHP on your computer!
Getting Started With MySQL
Go to your WAMP5 Homepage, and click on phpmyadmin, which is under the “Tools” subheading. phpmyadmin is a graphical interface which is extremely popular in terms of operating MySQL. This is the method with which I use MySQL; the other option is using the command line to access it. That makes it complicated, and I prefer something that I can see and navigate through easily.
When you access phpmyadmin, your databases will be listed in the column on the left. You can navigate through the program using the tabs spanning across the top. What we are concerned with at this point is the text box smack dab under the title, “Create new database”. You can call your database whatever you want; for this tutorial, I will call mine “tut-portfolio”. Don’t change any settings unless you know what you’re doing. Press create to…well, create it, obviously!
Now you will have something like this:
Holy crap. That’s really overwhelming. Taking it in bit by bit will ease the pain. The “Field” will be the title of your…field. The type will define what kind of field it is; INT for an integer, Varchar for a string, etc. Length/Values is how long you want it to be (ex. 250 characters for varchar). Don’t worry about Collation and Attributes. Null defines whether it is required or not; if you check it off, it means that it’s okay to leave that field blank. The Index column has 4 options; the only one that concerns basic MySQL is the “PRIMARY” setting; this indicates that the specific field is the primary key by which a row of data is identified. You’ll see what I mean in a second. Finally, A_I means auto increment (increase by 1 automatically), and Comments is just that.
Call the first field “id”. This is what will identify each row. Set it to INT, and set the Length to 2 (you’re not going to have more than 99 projects on display…but if you are, feel free to increase it). Under Index, set this as PRIMARY, and tick A_I.
The next fields are much simpler; we are just going to define the name, type, and length. Follow this picture:
Basically, we created 5 more fields: name, description, image, links, and technologies_used. For name, we set it as varchar and 250 characters; description is text (which allows 64 kilobytes of text – more than enough for a description), image is a varchar of 500 characters; links is a varchar of 250 characters; technologies_used is a varchar of 600 characters – again, more than enough.
Press save to create your table. Next, input some data. To do this, click on the “Insert” tab on the top of the page. Next to each of the fields we made, you’ll see an input box. Fill in your information. For the image field, enter a location RELATIVE to the root folder (ex. in your images folder). Place the specific images within your image folder.
Note: Make sure you leave “id” blank. It will automatically fill itself in for each row of data.
To make sure you’ve done it right, click on the “Browse” tab, and you should see all the data you inserted. I’ve put in 3 rows of data.
Now we’re done the MySQL part, and it’s time to move onto the PHP!