HTML and CSS Reference
In-Depth Information
eXerCISe 3-2: pUBLIShING & SUBSCrIBING WIth pUSher
to get familiar with pusher's server-side functionality, let's build a simple messaging system.
For the foundation, we'll reuse as much of the htML and Css that we wrote in the exercises in Chapter 2 as
possible to save time. Create a new htML file and enter the following code:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Realtime Web Apps – Exercise 3-2</title>
<link rel="stylesheet" href="styles/layout.css" />
</head>
<body>
<header>
<h1>Send a Message with Pusher!</h1>
</header>
<section>
<form method="post" action="post.php">
<label>
Your Name
<input type="text" name="name"
placeholder="i.e. John" />
</label>
<label>
Your Message
<input type="text" name="message"
id="message" value="Hello world!" />
</label>
<input type="submit" class="input-submit" value="Send" />
</form>
</section>
<aside>
<h2>Received Messages</h2>
<ul id="messages">
<li class="no-messages">No messages yet...</li>
</ul>
</aside>
<footer>
<p>
All content © 2013 Jason Lengstorf & Phil Leggetter
</p>
</footer>
Search WWH ::
Custom Search