Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 103 lines (67 sloc) 6.516 kB
95b250a @butchler Create README.
authored
1 My Awesome Blog
2 ===============
3
6882994 @butchler Remove code to keep focus on README/tutorial.
authored
4 This is a (currently in progress) project to teach my friend how to create a simple blog using PHP and MySQL. You can check out how the simple blog looks [here](http://butchler.github.com/My-Awesome-Blog/) and view the branches to see how the project evolves from naive implementations (such as writing the entire blog in straight HTML) up to a simple blog system. The goal is that, by doing it incrementally like this, it will be very clear why things are done the way they are in the final product.
5
6 This project is meant for people who already have some programming knowledge and understand HTML, but want to learn more about server-side web development. That being said, I am not an expert at server-side web development at all, so any suggestions/criticisms are welcome!
95b250a @butchler Create README.
authored
7
fe5131a @butchler Version 1 - Static HTML
authored
8 Version 1 - Static HTML
9 -----------------------
10
a617738 @butchler Version 3 - Page-specific Variables
authored
11 [(Browse Source)](http://github.com/butchler/My-Awesome-Blog/tree/version1-static-html)
12
6882994 @butchler Remove code to keep focus on README/tutorial.
authored
13 The first version just uses static HTML and CSS files. However, all of the content that will be on the website is already there. Nothing about the HTML should really change after this point, only how the HTML is generated. You can see how the site looks here: http://butchler.github.com/My-Awesome-Blog/
fe5131a @butchler Version 1 - Static HTML
authored
14
15 There are three main pages on the website: the home page, the archives page, and the about page. The home page lists the posts from the most recent month that actually has any posts. The archives page just has a list of links, one link for each month in which posts were posted to the blog (December 2011, February 2012, etc.). Each month page just shows all of the blog posts that were posted in that month. Finally, the about page is just a static page with some information about the blog.
16
17 This method isn't very flexible: all of the layout code is duplicated on each page, so if you want to change something about the layout HTML you'll have to do it for every single file. Also, you'll have to manually move things over to the archives pages as they get old, which is obviously inconvenient.
18
4e95c6d @butchler Version 2 - PHP and Include Files
authored
19 Version 2 - PHP and Include Files
20 ---------------------------------
21
a617738 @butchler Version 3 - Page-specific Variables
authored
22 [(Browse Source)](http://github.com/butchler/My-Awesome-Blog/tree/version2-php-and-includes)
23
4e95c6d @butchler Version 2 - PHP and Include Files
authored
24 To get rid of the duplicated HTML that's currently distributed across all of the files, you can use PHP, a programming language commonly used on servers, to automatically insert the layout HTML for you.
25
a617738 @butchler Version 3 - Page-specific Variables
authored
26 First, I created a folder called called includes/ and created two files in it, called before.html and after.html. These contain all of the HTML that comes before and after the main content, such as the opening and closing `<html>` tags and the `<head>` tag. Next, I went through all of the pages and replaced the redundant HTML with these two snippets of PHP code:
4e95c6d @butchler Version 2 - PHP and Include Files
authored
27
28 ```php
29 <?php include 'path/to/includes/before.html'; ?>
30 ... Page specific content goes here ...
31 <?php include 'path/to/includes/after.html'; ?>
32 ```
33
34 The path to the includes folder was different depending on the file's location relative to the includes folder: for the home page it was ./includes and for the archive/2012/03.php page it was ../../includes. I also changed the extension of all of the pages from .html to .php.
35
36 In order to get the site working with these changes, you'll need to either upload the files to a web server or install a local web server on your computer. If you're using Linux, you should probably use your distro's package manager to install Apache and PHP (and MySQL for later). If you're using Mac or Windows, you'll probably want to check out [MAMP](http://www.mamp.info/) and [WAMP](http://www.wampserver.com/en/), respectively.
37
a617738 @butchler Version 3 - Page-specific Variables
authored
38 Version 3 - Page-specific Variables
39 -----------------------------------
40
71ac9e3 @butchler Update About and README.
authored
41 [(Browse Source)](http://github.com/butchler/My-Awesome-Blog/tree/version3-page-specific-variables)
42
a617738 @butchler Version 3 - Page-specific Variables
authored
43 So now we've fixed the issue with the layout HTML being duplicated everywhere, but there's one problem: in order to fix that problem, I had to sacrifice the page titles. Before, each page had a different `<title>` tag, specific to that page, like `<title>My Awesome Blog - About</title>` for the about page, `<title>My Awesome Blog - Archives</title>` for the archives page, and so on. But now, because each page is including the before.html file and because before.html just sets the `<title>` to My Awesome Blog, all of the page have the same title. In this case, it's not a very big issue, but it would still be nice to fix, and in a more complicated project you might need to do something similar if you have certain information that is different for each page.
44
e1b687f @butchler Fix README again.
authored
45 In order to fix this, I'm going to replace this line that was at the beginning of each file:
a617738 @butchler Version 3 - Page-specific Variables
authored
46
47 ```php
48 <?php include 'path/to/includes/before.html'; ?>
49 ```
50
e1b687f @butchler Fix README again.
authored
51 with this:
a617738 @butchler Version 3 - Page-specific Variables
authored
52
53 ```php
54 <?php
55 $title = '<title of page>';
56
57 include 'path/to/includes/before.php';
58 ?>
59 ```
60
61 In PHP, all variables begin with the `$` character, so all I've done is set a variable called `$title` to the title of the page. Right now, this doesn't do anything because before.php doesn't do anything with the `$title` variable. Notice that I changed the name of before.html to before.php. This is because I'm going to put some PHP code in it to use `$title`, and changing the extension to .php tells the web server (well, Apache anyways, I don't know about other web servers) to interpret the file as PHP code instead of static HTML.
62
63 This line in before.php:
64
e1b687f @butchler Fix README again.
authored
65 ```
a617738 @butchler Version 3 - Page-specific Variables
authored
66 <title>My Awesome Blog</title>
67 ```
68
69 will become:
70
71 ```php
72 <title>My Awesome Blog - <?php echo $title; ?></title>
73 ```
74
e1b687f @butchler Fix README again.
authored
75 Assuming that the `$title` variable has been set like in the above code, this code will set the `<title>` to "My Awesome Blog - Title of Page". Now you can go through all of the pages and set their `$title` appropriately.
a617738 @butchler Version 3 - Page-specific Variables
authored
76
d47093e @butchler Fix README.
authored
77 A lot of the pages also display the title of the page as an `<h2>` in the actual content of the page, though, so now that the title is stored in the `$title` variable, you can use that to shorten up the code a little bit. You can remove the lines that were like this:
a617738 @butchler Version 3 - Page-specific Variables
authored
78
e1b687f @butchler Fix README again.
authored
79 ```
a617738 @butchler Version 3 - Page-specific Variables
authored
80 <h2>Title of Page</h2>
81 ```
82
83 from each of the pages and instead have that line appear only once in before.php:
84
85 ```php
86 <section id="main">
87 <h2><?php echo $title; ?></h2>
88 ```
89
ddfb297 @butchler Add planned versions.
authored
90 ###Planned Versions
91
92 * Version 4 - Multiple Layouts
93 * Version 5 - Automatic Archiving
94 * Version 6 - Using a Database
95 * Version 7 - Pretty URLs
96 * Version 8 - Admin Interface
97 * Version 9 - User Authentication
98 * Extra - Markdown Filter
99 * Extra - Comments
100 * Extra - Model-View-Controller
101 * Extra - AJAX
102
Something went wrong with that request. Please try again.