Web International Awards

payday loan

30

MAR 2010 21

Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [part I]

Live news system preview

Overview of the series

During this series of posts we're going to tackle building a live news blogging system. There will be multiple administrators who can add, delete and edit news. Each news can be assigned to one category only. The visitors will be able to see all news, filter them based on categories and publishing date. If one's online and a news is published it will receive a pop-up that will let him know there's new news in the feed — just like Twitter displays the new tweets message on top of the timeline.

You can click the above screenshot to get a full preview of how the layout will look like. Remember we're building it with HTML5 which means it will look really bad on older browsers and Internet Explorer. The end goal of this task is not to build the news system alone, but to showcase some of the emerging technologies.

I have no clue how many parts this tutorial will have. However, time will tell. Today we'll tackle coding the layout, styling it and adding some basic jQuery features.

Coding the HTML5 structure

I am not going to write an introduction to HTML5. In case this is your first contact with HTML5, I suggest you to read, or at least scan W3C's draft on it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE HTML>
<html>
	<head>
		<title>Live News System</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
 
	</head>
	<body>
 
		<header class="top-rounded">
			Live News System <!-- The title of our app -->
		</header>
 
		<div id="wrapper">
			<section class="btlft-rounded">
 
				<h1>Selected news:</h1>
				<details>
					Filters used: <span class="categories not-selected">categories</span><span class="daterange not-selected">date range</span>
				</details>
 
				<article>
					<h1>Big bang</h1>
					<details>Posted by <span>admin</span> in <span class="cat">Economics</span> on <span>2010-03-30</span> at <span>11:25:29</span>.</details>
					<p>How are you doing in the economical downturn ?</p>
				</article>
 
			</section>
 
			<aside class="btrght-rounded"><!-- The aside will hold the filters in place: date range and categories -->
				<div>
					date picker in here
				</div>
				<ul>
					<li class="title">Browse by category</li>
					<li><a>Economics</a></li>
					<li><a>Education</a></li>
					<li><a>Health</a></li>
					<li><a>IT</a></li>
					<li><a>Politics</a></li>
					<li><a>Weather</a></li>
				</ul>
			</aside>
 
		</div>
		<span class="clear">&nbsp;</span>
 
		<footer>
			You are logged in. You can <A  href="#addnews" rel="addnews" name="modal">add news</a> or <a href="logout.php" target="_self">logout</a>
		</footer>
 
		<!-- used for javascript UI, modals etc-->
 
		<article class="no-hover hidden" id="newdata">
			<h1>New articles in the system. Click here to view them</h1>
		</article>
 
		<div id="overlay-mask">
			&nbsp;
		</div>
		<div id="overlay-content" class="all-rounded">
			<div>				
			</div>
			<a class="close bottom-rounded">Click to close</a>
 
		</div>
 
		<div class="login hidden">
			<form action="login.php" method="post" accept-charset="utf-8" id="form-overlay">
				<fieldset>
					<label for="name">Username : </label>
					<input type="text" name="username" value="" id="username" class="all-rounded"/>
					<label for="password">Password :</label>
					<input type="password" name="password" value="" id="password" class="all-rounded">
 
					<input type="submit" name="submit" value="Log me now" id="submit" class="submit all-rounded" />
				</fieldset>
			</form>
		</div>
 
		<div class="addnews hidden">
			<form action="addnews.php" method="post" accept-charset="utf-8" id="form-overlay">
				<fieldset>
					<label for="title">Title : </label>
 
					<input type="text" name="title" value="" id="title" class="all-rounded"/>
					<label for="formcategory">Category :</label>
					<select name="formcategory" id="formcategory" size="1">
						<option selected="selected" value="Economics">Economics</option><option value="Education">Education</option><option value="Health">Health</option><option value="IT">IT</option><option value="Politics">Politics</option><option value="Weather">Weather</option>					</select>
					<label for="body">Body text :</label>
 
					<textarea name="body" rows="8" cols="40" class="all-rounded"></textarea>
					<input type="submit" name="submit" value="Add news" id="submit" class="submit all-rounded" />
				</fieldset>
			</form>
		</div>
 
		<div class="editform hidden">
			<form action="editnews.php" method="post" accept-charset="utf-8" id="form-overlay" class="insertcontent">
				<fieldset>
 
					<label for="edittitle">Title : </label>
					<input type="text" name="edittitle" value="" id="edittitle" class="edittitle all-rounded" />
					<label for="editformcategory">Category :</label>
					<select name="editformcategory" id="editformcategory" size="1" class="editcategory">
						<option selected="selected" value="Economics">Economics</option><option value="Education">Education</option><option value="Health">Health</option><option value="IT">IT</option><option value="Politics">Politics</option><option value="Weather">Weather</option>					</select>
 
					<label for="editbody">Body text :</label>
					<textarea name="editbody" rows="8" cols="40" class="editbody all-rounded"></textarea>
					<input type="hidden" name="editid" value="" id="editid" class="editid hidden" />
					<input type="submit" name="submit" value="Edit news" id="submit" class="submit all-rounded" />
				</fieldset>
			</form>
		</div>
 
	</body>
 
</html>

HTML explained

I am now going to explain parts of the html that are not straightforward and parts which contain elements that will be heavily used in conjunction with the future php/jsp coding and jQuery.

  • line 1: HTML5 doctype
  • line 10 to 12: The heading of our site, wrapped in a header tag. This is the one with the smooth blue gradient
  • line 14 to 45: Our wrapping div. We will have two columns for our app, and we want them to be centered relative to the full page. Wrapping them in an outer div will allow us to do just that
  • line 15 to 28: Our main content area, wrapped in a html5 section tag. Inside the section we'll have multiple articles, each having a h1 heading, a details section containing information about author, publishing date etc. and the actual text of the article wrapped in paragraphs. Above all articles we'll have a details tag which will hold our filter controls: date-range and categories. These two filters will flash when in use and stay gray when not.
  • line 30 to 43: The aside, as the name tells, is the right sidebar. It will contain the datepicker controls and a list with all news categories that our system has.
  • line 46: The clearing span is necessary because the section and aside elements will float within the wrapping div to left and right respectively, and we need to push down the footer.
  • line 48 to 50: Footer information is contained within the footer tag.
  • line 54 to 114: As the comment in the html says, this html code will contain elements used in javascript overlays, webforms for adding and editing news, login forms and elements used to pop-out system messages.
  • line 54 to 56: This contains the message that will pop out on top of the listed news when a new item is added to the database while visitors are browsing the app. This message will be pop-out using jQuery after a series of Ajax calls. Once popped out, if a user will click it, messages will be refreshed and all items will be displayed in the timeline.
  • line 58 to 66: This 2 elements will contain the overlay mask (a dark transparent background) and the overlay content which can be one of the elements that follow: login forms, add and edit forms. The overlay I'm going to use is one derived from this awesome article: Building an awesome sliding menu with modal windows using jQuery.
  • line 68 to 79: A basic login form
  • line 81 to 96: A form that will be used to input new items to our news database
  • line 98 to 114: A form that will be used to edit news items that are currently into our database

And we're pretty much done with html coding. However, when we'll start adding php code we will slightly modify the above code to blend with the awesome functionality we will be building.

The CSS

As you've seen, the HTML code above contains various classes and IDs. They were carefully chosen for styling and functionality purposes. Let's see what each of them does and what rules we apply to them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/* general styling */
body	{ background-color:#222222; }
* { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
 
.all-rounded,
article,
.not-selected,
.selected,
aside ul li a,
aside div span	{ border-radius:9px; -moz-border-radius:9px; -webkit-border-radius: 9px; }
.top-rounded	{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px; 
				 border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; }
.bottom-rounded	{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; 
				  border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.left-rounded	{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
				  border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.right-rounded	{ border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
				  border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.btlft-rounded	{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.btrght-rounded	{ border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.not-selected,
.selected	{ display:block; float:right; width:70px; height:25px; padding:0px 5px; margin:0px 2px; line-height:25px; }
.no-hover:hover	{ background-color:#E2E5E8; border:1px solid #E2E5E8; }
.message, .message:hover { background-color:#FFFFCC; border:1px solid #EEEEBB; height:30px; line-height:30px; }
.error, .error:hover { background-color: #FF8D87; border:1px solid #FF0000; height:30px; line-height:30px; }
 
/* end general styling classes */
 
/* structure styling - sizes and positioning */
 
header	{ display:block; width:898px; height:48px; margin:0px auto; margin-top:50px; }
#wrapper { display:block; width:900px; height:50px; margin:0px auto; margin-bottom:25px; }
section	{ display:block; width:649px; padding:0px 25px 25px 25px; margin:0px auto; float:left; }
section h1	{ display:block; width:300px; height:25px; float:left; margin-bottom:25px; margin-top:25px; }
section > details { display:block; width:260px; height:25px; float:right; margin-bottom:25px; margin-top:25px; }
aside { display:block; width:199px; margin:0px auto; float:right; }
article	{ display:block; clear:both; margin-top:25px; }
article h1,
article details	{ display:block; width:550px; padding:0px; margin:0px; }
 
aside ul li a	{ display:block; width:170px; margin:0px auto; height:25px; border:1px solid #CACDD0; padding:0px 5px; }
aside fieldset	{ padding:0px 10px 5px 10px; }
aside input	{ display:block; width:140px; float:left; clear:left; }
aside label	{ display:block; width:140px; float:left; clear:left; }
aside div span	{ display:block; padding:5px 10px; width:160px; margin:0px auto; margin-bottom:5px; }
 
footer	{ display:block; width:900px; margin:0px auto; text-align:center; margin-bottom:10px; }
 
#overlay-mask { display:none; z-index:1000; position:absolute; top:0; left:0; }
#overlay-content { display:none; z-index:1100; position:absolute; }
 
article span.controls { display:none; width:32px; height:64px; }
article:hover span.controls	{ display:block; float:right; clear:right; }
 
/* end structure styling - sizes and positioning */
 
/* structure styling - appearance */
 
header	{ background:#6295B4 url('../images/header_bg.jpg') repeat-x; text-align:center; line-height:50px; 
		 font-size:25px; color:#FFF; border:1px solid #CCCCCC; border-bottom:none; text-shadow:1px 3px #4E7993; }
section	{ background-color:#E2E5E8; border-left:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; }
section #overlay-mask { position:absolute; display:none; color:#222222; z-index:100; top:0px; left:0px; }
section > details { color:#999999; line-height:25px; }
aside { background-color:#CACDD0; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC;
		padding-bottom:25px; }
aside ul { list-style:none; }
aside ul li	{ height:25px; line-height:25px; border-bottom:none; background:none; padding:0px 10px; color:#666666;
	 		margin-bottom:5px; }
aside ul li.title,
aside div form h1 { display:block; height:40px; line-height:40px; color:#222; border-bottom:1px solid #FFF; color:#222222;
					background:url('../images/aside_title_bg.jpg') repeat-x; text-align:center; font-size:17px; }
h1	{ color:#222222; font-size:20px; }
article	{ border:1px solid #E2E5E8; padding:5px; }
article h1	{ font-size:25px; }
article > details { font-size:13px; color:#6396B5; padding-bottom:5px; }
article > details span	{ font-weight:bold; color:#547F9A; }
article:hover	{ background-color:#D9DCDF; border:1px solid #222222; }
.not-selected	{ border:1px solid #7FC2EA; background:#CCCFD2 url('../images/not_selected.jpg') repeat-x; }
.selected	{ border:1px solid #FEFEFE; background:#6295B4 url('../images/selected.jpg') repeat-x; color:#FFF; }
 
aside ul li a:hover	{ background:#CCCFD2 url('../images/not_selected.jpg') repeat-x; border:1px solid #7FC2EA; }
aside ul li a.selected-aside { background:#6295B4 url('../images/selected.jpg') repeat-x; color:#FFF; border:1px solid #FEFEFE; }
aside ul li a.selected-aside span { display:block; width:5px; height:25px; float:right; padding:0px 5px 0px 0px; text-shadow:1px 3px #4E7993; }
 
aside div span { border:1px solid #FEFEFE; background:#6295B4 url('../images/selected.jpg') repeat-x; color:#FFF;
 										  text-align:center; }
aside label	{ color:#666666 }
footer 	{ color:#666666; }
footer a { text-decoration:none; color:#666666; border-bottom:1px solid #666666; }
.hidden	{ display:none; }
 
#overlay-content { width:500px; }
#overlay-content div { width:450px; padding:25px; padding-bottom:10px; }
#overlay-content a.close { display:block; padding:0px; border-top:1px solid #333; font-size:15px; line-height:25px; height:25px; 
						 text-align:center; }
#overlay-content div { overflow:auto; }
#overlay-mask { background-color:#222; }
#overlay-content { background-color:#FFF; }
article span.controls { line-height:32px; }
 
.delete	{ display:block; width:32px; height:32px; background:url('../images/error_32_default.png') no-repeat; }
.edit { display:block; width:32px; height:32px; background:url('../images/information_32_default.png') no-repeat; }
.delete:hover { background:url('../images/error_32.png'); }
.edit:hover	{ background:url('../images/information_32.png'); }
 
/* end structure styling - appearance */
 
#form-overlay { display:block; width:450px; padding:0px; }
#form-overlay small { font-size:10px; float:right; width:370px; text-align:left; }
#form-overlay fieldset { display:block; padding:15px 0px; }
#form-overlay label	{ display:block; width:125px; height:27px; font-size:16px; line-height:27px; float:left; clear:left;
					text-align:right; margin-bottom:5px; color:#666666; }
#form-overlay input	{ display:block; width:300px; float:right; height:21px; font-size:16px; padding:2px 10px; margin-bottom:5px;
	 				background-color:#C8D2C5; border:1px #E8AF3B solid; color:#666666; }
#form-overlay textarea { display:block; width:300px; float:right; height:200px; font-size:16px; padding:5px 10px; margin-bottom:5px;
					background-color:#C8D2C5; border:1px #E8AF3B solid; color:#666666; }	
#form-overlay input.submit { display:block; width:125px; height:35px; margin:0px 50px; color:#666; line-height:30px;
							  background:url('../images/white_btn.jpg') repeat-x; margin-right:198px; }
#form-overlay input.submit:hover { color:#333; cursor:pointer; }
#form-overlay input.hidden { display:none; }

CSS explained

  • lines 2 and 3: Contain style resets and default values.
  • line 5 to 20: Contain all elements and classes applied to elements which have one, two or four rounded corners.
  • lines 21 and 22: These classes are applied to the filters listed in the upper right corner of our section element — the filters that will flash when categories in the sidebar are selected
  • lines 24 and 25: Styling of the messages which will appear on top of the timeline. There are 2 types of messages: errors and confirmation messages.
  • line 31: Structure styling for the header that contains our app's name
  • line 32 to 45: Structure styling for the wrapping div, section and aside elements as well as article layout
  • line 47: Structure styling for the footer element
  • lines 49 and 50: Structure and positioning styling for the overlay mask and overlay content placeholder
  • line 52 and 53: These spans don't show up anywhere in the html, right? However, these will pop out everywhere once an administrator is logged into the system. Further explanation will be provided when we reach the php coding phase
  • line 59 to 89: We've set the structure and layout of our elements, now we add borders, colors, backgrounds to make the app shine
  • line 90: This class is applied to elements which should not be visible on page load, such as add, edit and login forms which pop-out in the overlay instead
  • line 92 to 98: Rounding up the design of the footer
  • line 99 to 104: Styling of admin controls which you'll see them in action soon
  • line 108 to 120: Finally, styling of individual form elements

Basic jQuery functionality

The fact is that adding elements to either the aside or the section elements of the app will ruin the layout a bit. What I am referring to here is the fact that if a message is displayed in the section, or a new element introduced to the DOM, the length of the section will be higher than the original one. That's why we need to ensure that the section's height is always equal to the one of the aside element.

Unequal heights without some javascript coding

1
2
3
4
5
6
7
8
	// column heights - equalize
	var asideHeight = 0; // store aside box height
	var contentHeight = 0; // store content box height
	asideHeight = $('aside').height(); // get height
	contentHeight = $('section').height(); // get height
	if(asideHeight < contentHeight) $("aside").height(contentHeight); // update height
		else $("section").height(asideHeight); // or update height
	// done with column heights

The code above is run on page load, and it checks the height of the main section as well as the one of the aside element. It then compares the 2 heights and adjusts the height of the smallest element accordingly.

End of part I

And we've reached the end of our first part. We've seen how we can create a pretty complex layout using html5, how to style it using CSS3 and we've also seen how we can achieve equal heights for two independent columns using javascript (we've also got a dedicated article about this, and we're using the same technique for this site too).

I hope you really enjoyed this article. Stay toned to our new content as the next article will tackle a lot more javascript building MySQL databases, connecting to them via php and more! Please share the link with your friends. You can stay updated to new content via our RSS feed or by email.

Further reading

Published on Tuesday, March 30th, 2010 at 3:42 pm in tutorials.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. Noura Yehia says: April 1st, 2010 at 7:32 am

    Interesting tutorial, can you show us a demo?

  2. Bogdan Pop says: April 1st, 2010 at 8:16 am

    Hi Noura,

    A full demo will be available when we reach the final phase of the tutorial.

    However, now that you’ve mentioned it, I am thinking about preparing a static demo version for the layout and coding up to this point.

    I’ll update the post in a day or two.

  3. Avinash says: April 2nd, 2010 at 1:36 pm

    Nice tutorial!
    How long it took for you to complete this layout? Html5 is really amazing!

    Thanks for the tutorial.

  4. Bogdan Pop says: April 2nd, 2010 at 1:46 pm

    Hi Avinash,

    I’ve worked quite a lot with html5 and I can’t know for sure how much it took me to do this layout, but probably somewhere around 30 minutes with CSS styling as well.

    If you’re referring to the full system described, around 1 day because it required a lot of testing.

  5. Zabava says: April 2nd, 2010 at 2:09 pm

    HTML5 is really good thank you for tutorial!

  6. ivandjl says: April 7th, 2010 at 9:32 pm

    Wow!, very usefull!

  7. Bogdan Pop says: April 7th, 2010 at 10:40 pm

    Hey Ivandjl,

    Check out the newly added second part http://www.webia.info/articles/tutorials/building-a-live-news-blogging-system-in-php-spiced-with-html5-css3-and-jquery-part-ii/

  8. [part IV] says: April 27th, 2010 at 11:39 am

    [...] a first time visitor, you can check out the demo of this tutorial and perhaps you should read the first, the second and the third part of the series (which are required to fully understand what we're [...]

  9. [part V] says: May 11th, 2010 at 10:04 am

    [...] building a live blogging system in php. In case you missed it, you should definitely start with the first part of the series, or at least check out the [...]

  10. JSP version of tutorial says: August 18th, 2010 at 6:24 am

    [...] 5 months ago I started a series of tutorials which described the process of building a live news blogging system in php. When the series ended, I promised that another series will follow and will describe the process of [...]

  11. Designs Planet HTML5 says: December 5th, 2010 at 5:44 pm

    [...] Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [...]

  12. HTML 5 Tutorials says: December 9th, 2010 at 3:03 am

    [...] 2. Building a Live News Blogging System [...]

  13. Adne springer says: December 10th, 2010 at 12:30 am

    Hii i’m a newbie to php and jquery and i was wondering in part 1 and 2 you add some jquery. but where and how do it had it…?

  14. Bogdan Pop says: December 13th, 2010 at 3:47 pm

    Hi Adne,

    yes there is jQuery in part 2. The third part doesn’t contain jQuery, but following parts, up to the end of the tutorial, which I think it’s 7 or 8 have jQuery.

  15. Best HTML5 Tutorials says: December 17th, 2010 at 11:29 am

    [...] 22. Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [...]

  16. stylishwebdesigner says: February 8th, 2011 at 8:09 am

    [...] 5. Building A Live News Blogging System In PHP, Spiced With HTML5 [...]

  17. Jeremy Bayone says: February 13th, 2011 at 10:08 am

    Wow, this is really great stuff.

  18. Bogdan Pop says: February 14th, 2011 at 10:35 pm

    Glad you liked it Jeremy!
    You should look over the rest of the tutorial and perhaps download the sources and play around with them.

  19. HTML5 Tutorials - Noupe Design Blog says: February 23rd, 2011 at 1:22 pm

    [...] Building a Live News Blogging System in PHP Spiced Up with HTML5, CSS3 and jQuery In this tutorial we will be building a live news blogging system in PHP. Another tutorial worth checking out: [...]

  20. HTML 5 Tutorial - Webwibe says: February 25th, 2011 at 11:03 am

    [...] Building a Live News Blogging System in PHP Spiced Up with HTML5, CSS3 and jQuery In this tutorial we will be building a live news blogging system in PHP. Another tutorial worth checking out: [...]

  21. HTML5 Tips and Tricks « Tech Snippets says: July 31st, 2012 at 8:42 am

    [...] Building a live news blogging system in PHP, Spiced with HTML5 [...]





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.