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 [...]