Here’s a start for beginner web programmers: a Blog which will evolve into not only A blog, but a content management system. Alas, we need a beginning. This tutorial first starts with setting up our blog system. This blog system is designed in a way that can be expanded for future tutorials for real application.
Here’s the first video, Part 1:
Please click read more to see the sources, and part 2 and 3.
Part 2:
Part 3:
So, first I start with a base XHTML of my page(look at the bottom for download links, copying the segments below may not function 100%)
1 <?xml version=“1.0″ encoding=“UTF-8″?>
2 <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
3 xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”
4
5 Blog title
6 href=“main.css” type=“text/css” media=“screen” rel=“stylesheet”
7
8
9 class=“maincontent”
10 class=“top”
11 Blog title
12 class=“posts”
13 class=“post”
14 class=“author”AUTHOR Wrote
15 class=“title”TITLE
16 class=“content”Content
17
18 class=“post”
19 class=“author”AUTHOR Wrote
20 class=“title”TITLE2
21 class=“content”Content2
22
23
24
25
26
With the styling CSS file called main.css
1 .maincontent{
2 width: 95%;
3 margin: auto;
4 }
5 .top{
6 font-size: 2em;
7 }
8 .author{
9 font-style: italic;
10 }
11 .title{
12 font-weight: bold;
13 }
14 .content:first-letter{
15 color:#111;
16 font-size:xx-large;
17 }
18 .content:first-line{
19 font-size: larger;
20 font-style: oblique;
21 }
22 .content{
23 border-top: dashed thin black;
24 }
25 .post{
26 border-top: dashed thin gray;
27 }
Along all with all these base elements of style and page, we need a base to set our blog on. This base, naturally in word, will be our database. So I created a database for the blog and put in the following data
1
2 SET SQL_MODE=“NO_AUTO_VALUE_ON_ZERO”;
3
4 –
5 – Database: `tutorials_blog`
6 –
7
8 – ——————————————————–
9
10 –
11 – Table structure for table `posts`
12 –
13
14 CREATE TABLE IF NOT EXISTS `posts` (
15 `ID` int(255) NOT NULL AUTO_INCREMENT,
16 `username` int(255) NOT NULL,
17 `title` varchar(256) COLLATE utf8_unicode_ci NOT NULL,
18 `content` longtext COLLATE utf8_unicode_ci NOT NULL,
19 `date` int(255) NOT NULL,
20 PRIMARY KEY (`ID`)
21 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;
22
23 –
24 – Dumping data for table `posts`
25 –
26
27 INSERT INTO `posts` (`ID`, `username`, `title`, `content`, `date`) VALUES
28 (1, 1, ‘Happy Tacos’, ‘Hello Happy tacos and cheese with nacho and ranch.’, 1277514243),
29 (3, 1, ‘Some content’, ‘some other content to work with and so on.’, 1277514483),
30 (4, 1, ‘Jalopies go to town on sundays’, ‘happy go lucky Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac elit ligula. Quisque feugiat vehicula neque, ac elementum diam rutrum nec. Nulla ac cursus purus. Vestibulum dictum dapib us gravida. Sed laoreet, nisi porta interdum ullamcorper, massa nunc ullamcorper eros, id viverra nunc neque a magna. Duis e get leo velit. Etiam eget velit neque. Mauris metus odio, bibendum eget auctor non, hendrerit non ipsum. In vehicula magna e get augue pulvinar aliquam eget eget quam. Nullam in ante vitae velit cursus commodo vel eget risus. Vivamus rhoncus vehicul a massa, sit amet tincidunt justo tempor non. Maecenas risus odio, porta ut lacinia sit amet, porta in nibh. Etiam interdum, lectus nec mollis semper, lorem ipsum lacinia massa, ac tincidunt nulla orci vitae magna. Ut molestie tempus placerat. Cras volutpat, velit nec mattis pellentesque, nisl augue posuere quam, quis fringilla augue nunc sit amet eros. Cum sociis natoq ue penatibus et magnis dis parturient montes, nascetur ridiculus mus. ’, 1277515071);
31
32 – ——————————————————–
33
34 –
35 – Table structure for table `users`
36 –
37
38 CREATE TABLE IF NOT EXISTS `users` (
39 `ID` int(255) NOT NULL AUTO_INCREMENT,
40 `username` varchar(32) COLLATE utf8_unicode_ci NOT NULL,
41 `password` varchar(256) COLLATE utf8_unicode_ci NOT NULL,
42 `postname` varchar(128) COLLATE utf8_unicode_ci NOT NULL,
43 PRIMARY KEY (`ID`),
44 UNIQUE KEY `username` (`username`)
45 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;
46
47 –
48 – Dumping data for table `users`
49 –
50
51 INSERT INTO `users` (`ID`, `username`, `password`, `postname`) VALUES
52 (1, ‘kloplop321′, ’5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8′, ‘Kloplop321′);
As you can see, both a table is made not only for posts, but also for users. This is part of the step towards an expandable project, by separating data that can change, and also reduce redundancies in storage.
At this point, since I have the data, all I need to do is
- Connect to the database
- Query for posts
- Query for the usernames of all posts
- Edit the Template and fill in the data
Essentially, I do that. Here’s the source result. If you watch the video, you will see the process by which I do this, and you will hear me explain everything in detail of how and why.
1 <?php
2 $link = mysql_connect(‘localhost’, ‘phpuser’, ‘phppass’);
3 if (!$link) {
4 die(‘Could not connect: ’ . mysql_error());
5 }
6 //WE NEED to select the database!
7 mysql_selectdb(“tutorials_blog”);
8
9 echo ‘<?xml version=”1.0″ encoding=”UTF-8″?>’;
10 ?>
11 <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
12 xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”
13
14 Blog title
15 href=“main.css” type=“text/css” media=“screen” rel=“stylesheet”
16
17
18 class=“maincontent”
19 class=“top”
20 Blog title
21 class=“posts”
22 <?php
23 $sql = “SELECT * FROM `posts` ORDER BY `date` DESC”;
24 $result = mysql_query($sql);
25 while($row=mysql_fetch_array($result)){
26 ?>
27 class=“post”
28 class=“author”<?php
29 $sql = “SELECT postname FROM users WHERE ID = ”.$row['username'];
30 $result2 = mysql_query($sql);
31 while($author=mysql_fetch_array($result2)){
32 echo $author[0];
33 }
34 ?> Wrote
35 class=“title”<?php
36 echo $row['title'];
37 ?> at <?php
38 echo date(‘l jS \of F Y h:i:s A’,(int)$row['date']);
39 ?>
40 class=“content”<?php
41 echo htmlentities($row['content']);
42 ?>
43
44 <?php
45 }
46 ?>
47
48
49
50
As you can see, I took one of the demonstration posts from the base html, and I wrapped it symbolically with each row of data, or posts for the blog. I filled in the blanks for the post information
Download Link
- base.html
- main.css
- blog.php
- tutorials_blog.sql
Are all contained in in this zip archive
Now, the SQL file is only a dump in the database that you can import if you wish to skip the step of manually entering in the information that I did. However, I believe it is best for your experience to follow along with me, rather than just skipping to the end. Programmers learn by doing, not by solely observing the end result(that is called web browsing).
June 29th, 2010 at 2:30 pm
[...] tutorial 10 to have a link to a single-post page. First of all, I am basing this tutorial on the last tutorial(10), which established a basic blog. Here we are going to compound the original statement that looks [...]
October 5th, 2010 at 9:05 pm
I have a problem :
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\Program Files\VertrigoServ\www\lov\blog.php on line 25
October 5th, 2010 at 9:58 pm
Did you copy straight from my source code?
If you made any alterations, it may be due to either an SQL syntax error.
If you did not make any alterations, it could be that the table does not exist.
October 11th, 2010 at 6:45 pm
I got the same thing as Cau2. I’m lost.
October 12th, 2010 at 8:15 am
Thanks for posting, I’ll have to check it out. Though I don’t see how it does not work… since It worked while I was recording it live.
January 17th, 2011 at 6:29 pm
Thanks alot, it worked great!
February 17th, 2011 at 7:27 pm
Ok. I’m getting an Error
Warning: date() [function.date]: It is not safe to rely on the system’s timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected ‘America/New_York’ for ‘-5.0/no DST’ instead in C:\xampp\htdocs\blog\blog.php on line 38
February 17th, 2011 at 8:10 pm
Okay, Just to help you understand for future reference, there are different levels of errors
Fatal(Your page dies, it can’t recover)
Warnings (They tell you that something might be done wrong and something needs to be changed
Notices (They help you write your code better)
I usually turn warnings and notices off so that I can just go over the concepts in my tutorials
I see that you probably looked up a list for all these time zone identifiers, It is best to set the date_default_timezone_set() function on the first or second line in all your pages.
Can you put your code up on pastebin.com and send me the link in the URL after you send it so I can try running what you did and post back?
Thanks.
-Kloplop321
July 10th, 2011 at 12:00 pm
hi i tryed to writ the code from the beaginig but it went wrong so i copyed your code but it still wont work the basic.html works but it seems that its not geting any input from main.cssso its just boring text