/
tweetylicious.pl
executable file
·367 lines (324 loc) · 13.4 KB
/
tweetylicious.pl
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
#!/usr/bin/perl
#==================================================#
# Tweetylicious! A one-file microblog application #
#--------------------------------------------------#
# this file is meant as an example of how easy it #
# is to create cool web applications using cutting #
# edge technology, with Perl 5, JavaScript and #
# just a few lines of code! #
# #
# Tweetylicious is meant as a hommage to Twitter, #
# a very cool micro-blogging site, but is in no #
# way affiliated with it. We hope this work, which #
# is released for free as open source software #
# (see LICENSE in the bottom), will stimulate #
# all the young minds out there to create even #
# more amazing stuff. Viva la revolution! :) #
#==================================================#
#--------------------------------------#
# first we create our database (model) #
#--------------------------------------#
package Model;
use ORLite {
file => 'tweetylicious.db',
cleanup => 'VACUUM',
create => sub {
my $dbh = shift;
$dbh->do('CREATE TABLE user (username TEXT NOT NULL UNIQUE PRIMARY KEY,
password TEXT NOT NULL,
email TEXT,
gravatar TEXT,
bio TEXT
);'
);
},
};
# this validates registration data before we commit to the database
sub validate {
my ($user, $pass, $pass2, $routes) = @_;
return 'username field must not be blank' unless $user and length $user;
return 'password field must not be blank' unless $pass and length $pass;
return 'please re-type your password' unless $pass2 and length $pass2;
return "passwords don't match" unless $pass eq $pass2;
return 'sorry, this user already exists'
if Model::User->count( 'WHERE username = ?', $user) > 0;
# let's not allow usernames that are part of a valid route
return 'sorry, invalid username'
if grep { length $_->name and index($user, $_->name) == 0 } @$routes;
return;
}
#-------------------------#
# now the web application #
#-------------------------#
package main;
use Mojolicious::Lite;
use Mojo::ByteStream 'b'; # for unicode and md5
# this is a fake static route for our static data (static.js, static.css)
get '/static' => 'static';
# this controls the main index page
get '/' => 'index';
# these two control a user registering
get '/join' => 'join';
post '/join' => sub {
my $self = shift;
my $user = $self->param('username');
my $error = Model::validate( $user, $self->param('pwd'), $self->param('re-pwd'), app->routes->children);
$self->stash( error => $error );
return if $error;
Model::User->create(
username => $user,
password => b(app->secret . $self->param('pwd'))->md5_sum,
email => $self->param('email'),
gravatar => b($self->param('email'))->md5_sum,
bio => $self->param('bio'),
);
# auto-login the user after he joins, and redirect to /
$self->session( name => $user );
$self->redirect_to("/");
} => 'join';
# user login
get '/login' => 'login';
post '/login' => sub {
my $self = shift;
my $user = $self->param('username') || '';
if ( Model::User->count( 'WHERE username=? AND password=?',
$user, b(app->secret . $self->param('password'))->md5_sum) == 1
) {
$self->session( name => $user );
return $self->redirect_to("/");
}
$self->stash( error => 1 );
} => 'login';
# user logout is just a matter of expiring the session
get '/logout' => sub {
my $self = shift;
$self->session( expires => 1);
$self->redirect_to('/');
};
# let's rock and roll!
shagadelic;
#------------------------#
# finally, the templates #
#------------------------#
__DATA__
@@ layouts/main.html.ep
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tweetylicious</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dark-hive/jquery-ui.css" rel="Stylesheet" />
<link type="text/css" rel="stylesheet" media="screen" href="/static.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static.js"></script>
</head>
<body>
<div id="header"><a href="/"><div id="logo">Tweetylicious!</div></a>
<div class="options">
% if (session 'name') {
<a href="/<%= session 'name' %>">Home</a><a href="/logout">Sign-Out</a>
% } else {
<a href="/login">Sign-In</a><a href="/join">Join us!</a>
% }
</div>
</div>
<%= content %>
<div id="footer" class="ui-corner-all">Tweetylicious is Powered by <a href="http://perl.org">Perl 5</a>, <a href="http://mojolicious.org">Mojolicious</a>, <a href="http://search.cpan.org/perldoc?ORLite">ORLite</a> and <a href="http://jquery.org">jQuery</a>! Released under <a href="http://dev.perl.org/licenses/">the same terms as Perl itself</a>. </div>
</body>
</html>
@@ homepage.html.ep
% layout 'main';
<div id="content" class="half ui-corner-left">
% if (session('name') and session('name') eq $user->{username}) {
<h2>Hi, <%= session 'name' %>!</h2>
<form id="post" action="<%= url_for %>/post" method="POST">
<textarea class="ui-corner-all" cols="50" rows="3" id="message" name="message" tabindex="1"></textarea>
<span id="charsleft"></span>
<input id="submit" tabindex="2" type="submit" value="Tell the World!" />
</form>
% } else {
<h2 id="title"><%= $user->{username} %>'s posts</h2>
% }
<ul class="messages">
%# here we'll render all the posts in the page (later)
</ul>
</div>
<div id="sub-section" class="ui-corner-right">
<ul id="bio">
<li><span>Name</span><%= $user->{username} %></li>
<li><span>Bio</span><%= $user->{bio} %></li>
</ul>
</div>
@@ login.html.ep
% layout 'main';
<div id="content" class="full ui-corner-all">
<h1>Sign-in</h1>
% if ( stash 'error' ) {
<div class="ui-state-error ui-corner-all" style="width:466px">
<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em"></span><strong>Sorry, invalid username/password combination.</strong>
</div>
<p>Not a user yet? <a href="/join">Join now! It's free!</a></p>
<hr />
% }
<form name="login" method="POST" action="/login">
<table>
<tr><td>User name:</td><td><input type="text" tabindex="1" name="username" value="<%= param 'username' %>" /></td></tr>
<tr><td>Password:</td><td><input type="password" tabindex="2" name="password" value="<%= param 'password'%>" /></td></tr>
</table>
<input tabindex="3" type="submit" value="Login!"/>
</form>
</div>
@@ join.html.ep
% layout 'main';
<div id="content" class="full ui-corner-all">
<h1>Join us, it's free!</h1>
% if (my $error = stash 'error') {
<div class="ui-state-error ui-corner-all" style="width:450px">
<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em"></span><strong>Sorry:</strong> <%= $error %>
</div>
<hr />
% }
<form name="join" method="POST">
<table>
<tr><td>Username</td><td><input name="username" type="text" tabindex="1" value="<%= param 'username' %>" /></td></tr>
<tr><td>Password</td><td><input name="pwd" type="password" tabindex="2" value="<%= param 'pwd' %>" /></td></tr>
<tr><td>Password (again)</td><td><input name="re-pwd" type="password" tabindex="3" value="<%= param 're-pwd' %>" /></td></tr>
<tr><td>Email</td><td><input name="email" type="text" tabindex="4" value="<%= param 'email' %>" /></td></tr>
</table>
<span class="fineprint">Email is optional, and doesn't show in your page. It's used only to fetch your <a href="http://gravatar.com">gravatar</a></span>
<p>Tell us a bit about yourself - everyone will see it on your page</p>
<textarea class="ui-corner-all" tabindex="5" cols="50" rows="3" id="message" name="bio"><%= param 'bio' %></textarea>
<input type="submit" tabindex="6" value="Create!" />
</form>
</div>
@@ index.html.ep
% layout 'main';
<div id="content" class="info full ui-corner-all">
<h1>What is Tweetylicious?</h1>
<p>Tweetylicious is a <a href="http://en.wikipedia.org/wiki/Micro-blogging">microblogging</a> web application in a single file! It was built from scratch using state of the art technology, and is meant to demonstrate how easy and fun it is to create your own Web applications in modern Perl 5!</p>
<h1>What are its features?</h1>
<ul>
<li>Multi-user, with homepages, search and list of followers/following</li>
<li>Nice, clean, pretty interface (at least I think so :P)</li>
<li>User avatar images provided by <a href="http://gravatar.com">gravatar</a></li>
<li>Unicode support</li>
<li>Well structured, commented code, easy to expand and customize</li>
<li>Encrypted online sessions</li>
<li>Uses an actual database (SQLite) and stores encrypted user password</li>
<li>Free and Open Source Software, released under the same terms as Perl itself.</li>
</ul>
<h1>How can you fit all that in a 'single file'?! It's gotta be huge and clobbered then!</h1>
<p>Not at all! Tweetylicious is built on top of Mojolicious::Lite and ORLite, two very simple modules that have absolutely no dependency other than Perl 5 itself. Mojolicious::Lite allows you to create powerful web applications in a very simple and clean fashion, while also letting you integrate your templates on the bottom of the file. ORLite is an extremely lightweight ORM for <a href="http://sqlite.org">SQLite</a> databases that lets you specify your schema on the fly.</p>
<p>Removing just blank lines and comments, the Model has ~80 lines, the Controller ~110 lines, templates ~170 lines, plus ~90 lines of static css and ~60 of static javascript. And that's the <strong>whole</strong> app.</p>
<p>But don't take my word for it, just browse through it :)</p>
<h1>What do I need to make it work on my own system?</h1>
<ul>
<li>Perl 5 <span class="fineprint">(if you're running Linux or Mac, you already have it! Windows users can get it <a href="http://strawberryperl.com">here</a>)<span></li>
<li>SQLite 3</li>
<li>Mojolicious</li>
<li>ORLite</li>
</ul>
<p>Tweetylicious also relies on the powerful jQuery JavaScript library, but that's downloaded and processed by the clients browser, so don't worry about it. Each user's avatar image is also provided externally, via gravatar.</p>
<p>Have fun!</p>
</div>
@@ static.css.ep
body {
width:720px;
margin:0 auto;
text-align:center;
background: #0f1923; /* #333; */
border:0;
}
a { text-decoration: none }
#header,#content,#sub-section,#footer {
overflow:hidden;
display:inline-block;
text-align:left
}
#header li { display: inline }
#logo {
float: left;
background: #0972a5;
height: 60px;
font-family: "Georgia", "Times New Roman", serif;
font-size: 26px;
color: #eee;
padding: 50px 10px 10px 10px;
}
.options { text-align: right; margin-left: 450px; margin-top: -5px }
.search { float: right; margin-top: 50px }
#search { background-color: #bbb; color: #444; width: 200px; font-size: 16px; }
#content {
background: #efe;
font-family: "Verdana", sans-serif;
min-height: 100px;
padding-left: 10px;
}
h1 { font-size: 1.2em }
#title { margin-left: 30px; }
.half { width: 78.7% }
.full { width: 100% }
.fineprint { font-size: 0.6em }
ul { margin: 0; padding: 0; list-style: none; list-style-position: outside; }
.info { padding-bottom: 10px }
.info ul { list-style-type: square}
.info ul li{ margin-bottom:10px }
#content ul {
display: block;
width: 90%;
margin: 10px auto;
}
#content ul.messages li {
border-top: 1px solid #ddd;
padding-top: 16px;
height: 70px;
margin-top: 10px;
}
.when { display: block; font-size: 10px; color: #aaa; }
img { float: left; margin: 1px; border: 0 }
#content .ui-icon { float: right; position: relative; top: -10px; right: 10px }
#content a:hover.ui-icon { border: 1px #ff0 dashed }
#content a { text-decoration: none }
.who { margin-right: 8px; font-weight: bold }
#sub-section {
width: 20%;
background: #ccc;
font: 0.8em "Verdana", sans-serif;
}
#message {
border: 1px solid #aaa;
padding: 4px 2px;
resize: none;
font-size: 1.15em;
font-family: sans-serif;
color: #333;
}
#post {
margin: 10px 50px 30px 50px;
}
#post input { margin-right: 54px; float: right; font-size: 0.6em; }
#charsleft {
display: block;
float: left;
font-weight: bold;
}
.orange { color: #ff6300 }
.red { color: #d11 }
#bio li { margin: 6px; line-height: 1em; }
#bio span, #followers span, #following span, #totalposts span {
font-weight: bold;
margin-right: 4px;
}
#followers li, #following li { margin: 1px }
#followers, #following, #totalposts { clear: both; margin-left: 5px; padding-top: 10px }
/* safari and opera need this */
#header,#footer {width:100%}
#content,#sub-section {float:left; margin-top: 20px; min-height: 360px; }
#footer {clear:left; margin: 20px auto; padding-top: 10px;height: 26px; background: #555; color: #ccc; font-size:12px; text-align: center; }
#footer a { text-decoration: none; color: #eee }
@@ static.js.ep
$(function() {
// creating our buttons
$(".options").find("a").button();
});