-
Notifications
You must be signed in to change notification settings - Fork 1
/
SweetSai.html
2301 lines (1779 loc) · 65.6 KB
/
SweetSai.html
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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" lang="en" xml:lang="en">
<head>
<title>SweetSai - a Sweet based web app dev effort for Semantic Style Sheets</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<meta name="title" content="SweetSai - a Sweet based web app dev effort for Semantic Style Sheets"/>
<meta name="generator" content="Org-mode"/>
<meta name="generated" content="2016-03-02T15:05+0530"/>
<meta name="author" content="Sai Gollapudi"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
html { font-family: Times, serif; font-size: 12pt; }
.title { text-align: center; }
.todo { color: red; }
.done { color: green; }
.tag { background-color: #add8e6; font-weight:normal }
.target { }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.right {margin-left:auto; margin-right:0px; text-align:right;}
.left {margin-left:0px; margin-right:auto; text-align:left;}
.center {margin-left:auto; margin-right:auto; text-align:center;}
p.verse { margin-left: 3% }
pre {
border: 1pt solid #AEBDCC;
background-color: #F3F5F7;
padding: 5pt;
font-family: courier, monospace;
font-size: 90%;
overflow:auto;
}
table { border-collapse: collapse; }
td, th { vertical-align: top; }
th.right { text-align:center; }
th.left { text-align:center; }
th.center { text-align:center; }
td.right { text-align:right; }
td.left { text-align:left; }
td.center { text-align:center; }
dt { font-weight: bold; }
div.figure { padding: 0.5em; }
div.figure p { text-align: center; }
div.inlinetask {
padding:10px;
border:2px solid gray;
margin:10px;
background: #ffffcc;
}
textarea { overflow-x: auto; }
.linenr { font-size:smaller }
.code-highlighted {background-color:#ffff00;}
.org-info-js_info-navigation { border-style:none; }
#org-info-js_console-label { font-size:10px; font-weight:bold;
white-space:nowrap; }
.org-info-js_search-highlight {background-color:#ffff00; color:#000000;
font-weight:bold; }
/*]]>*/-->
</style>
<script type="text/javascript">
/*
@licstart The following is the entire license notice for the
JavaScript code in this tag.
Copyright (C) 2012-2013 Free Software Foundation, Inc.
The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
function CodeHighlightOn(elem, id)
{
var target = document.getElementById(id);
if(null != target) {
elem.cacheClassElem = elem.className;
elem.cacheClassTarget = target.className;
target.className = "code-highlighted";
elem.className = "code-highlighted";
}
}
function CodeHighlightOff(elem, id)
{
var target = document.getElementById(id);
if(elem.cacheClassElem)
elem.className = elem.cacheClassElem;
if(elem.cacheClassTarget)
target.className = elem.cacheClassTarget;
}
/*]]>*///-->
</script>
</head>
<body>
<div id="preamble">
</div>
<div id="content">
<h1 class="title">SweetSai - a Sweet based web app dev effort for Semantic Style Sheets</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">1 Introduction</a></li>
<li><a href="#sec-2">2 Requirements</a>
<ul>
<li><a href="#sec-2-1">2.1 overview of requirement</a></li>
<li><a href="#sec-2-2">2.2 roadmap of activity</a></li>
<li><a href="#sec-2-3">2.3 r0 - release 0 requirement</a></li>
</ul>
</li>
<li><a href="#sec-3">3 Design</a>
<ul>
<li><a href="#sec-3-1">3.1 installation information</a></li>
<li><a href="#sec-3-2">3.2 execution information</a></li>
<li><a href="#sec-3-3">3.3 server side</a>
<ul>
<li><a href="#sec-3-3-1">3.3.1 CORS</a></li>
<li><a href="#sec-3-3-2">3.3.2 SWeet Store API</a></li>
</ul>
</li>
<li><a href="#sec-3-4">3.4 client side</a></li>
<li><a href="#sec-3-5">3.5 Software Engineering aspects</a></li>
</ul>
</li>
<li><a href="#sec-4">4 implementation</a>
<ul>
<li><a href="#sec-4-1">4.1 basic layout & structure</a></li>
<li><a href="#sec-4-2">4.2 Editor</a>
<ul>
<li><a href="#sec-4-2-1">4.2.1 model (database work)</a></li>
<li><a href="#sec-4-2-2">4.2.2 view</a></li>
<li><a href="#sec-4-2-3">4.2.3 my welcome page</a></li>
<li><a href="#sec-4-2-4">4.2.4 controller</a></li>
</ul>
</li>
<li><a href="#sec-4-3">4.3 support infra</a>
<ul>
<li><a href="#sec-4-3-1">4.3.1 Config.py file</a></li>
<li><a href="#sec-4-3-2">4.3.2 _<sub>init</sub>__.py file</a></li>
<li><a href="#sec-4-3-3">4.3.3 Authentication of user</a></li>
<li><a href="#sec-4-3-4">4.3.4 Macro for rendering WTF forms</a></li>
</ul></li>
</ul>
</li>
<li><a href="#sec-5">5 Installations</a></li>
<li><a href="#sec-6">6 Execution</a></li>
<li><a href="#sec-7">7 Server Side or Back-End Development work</a>
<ul>
<li><a href="#sec-7-1">7.1 Important code files</a></li>
<li><a href="#sec-7-2">7.2 SweetSai.py</a></li>
<li><a href="#sec-7-3">7.3 forms.py file</a></li>
<li><a href="#sec-7-4">7.4 my HTML files</a>
<ul>
<li><a href="#sec-7-4-1">7.4.1 core or base template</a></li>
<li><a href="#sec-7-4-2">7.4.2 navigation bar template</a></li>
<li><a href="#sec-7-4-3">7.4.3 how I intend to show sweets</a></li>
<li><a href="#sec-7-4-4">7.4.4 my page for getting Sweet User ID</a></li>
<li><a href="#sec-7-4-5">7.4.5 Submit page</a></li>
<li><a href="#sec-7-4-6">7.4.6 success page</a></li>
<li><a href="#sec-7-4-7">7.4.7 Here is my success page in HTML</a></li>
<li><a href="#sec-7-4-8">7.4.8 my logout page</a></li>
<li><a href="#sec-7-4-9">7.4.9 my LoginForm page</a></li>
<li><a href="#sec-7-4-10">7.4.10 style.css file</a></li>
</ul></li>
</ul>
</li>
<li><a href="#sec-8">8 Client-side or Front-End Development work</a>
<ul>
<li><a href="#sec-8-1">8.1 JavaScript code for front-end</a></li>
<li><a href="#sec-8-2">8.2 HTML code for front-end</a></li>
</ul>
</li>
<li><a href="#sec-9">9 clipboard</a></li>
</ul>
</div>
</div>
<div id="outline-container-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>Essentially we are trying to implement the notion of Semantic Style
Sheets. Style Sheets essentially provide alternate views to one
singular content. In our case we wish to provide alternate narratives
to one singular narrative. The alternative narratives may be more
meaningful to end users. This idea of a more meaningful narrative is
what we are calling semantic. So, a semantic style sheet is a
renarrating a existing page into something that has more meaning to an
enduser.
</p>
<p>
The renarration of a page to a more meaningful version is a type of
page transformation. We see the page transformation involving new set
of parameters
</p><ul>
<li>'d' a data-structure (perhaps an ontology) to markup a page into a
semantically meaningful setup. This is user-defined.
</li>
<li>'v' a data-structure (perhaps an ontology) to define the various
communities to which viewer belongs to. This defines which view to
show to a community of user.
</li>
<li>'r' this defines the renarration rules. This is also a
data-structure (perhaps an ontology) which gives the various choices
of renarration that are possible for a markup.
</li>
</ul>
</div>
</div>
<div id="outline-container-2" class="outline-2">
<h2 id="sec-2"><span class="section-number-2">2</span> Requirements</h2>
<div class="outline-text-2" id="text-2">
</div>
<div id="outline-container-2-1" class="outline-3">
<h3 id="sec-2-1"><span class="section-number-3">2.1</span> overview of requirement</h3>
<div class="outline-text-3" id="text-2-1">
<p>The overall aim is to develop a tool that would enable the following:
</p><ul>
<li>an editor environment
</li>
</ul>
<p>++ a user should be able to define a document structure (as an
ontology). This we are calling as 'd' in our transformation function
+++ this ontology will initially be a simple data structure. Over time
it will evolve into a more elaborate, user definable ontology.
++ a user should be able to import a web page by inputing a URL in the
input text area
++ a user should be able to markup an input html doc with user defined tags (based on a user ontology, which we
are calling 'd')
</p>
<ul>
<li>a viewer environment
</li>
</ul>
<p>++ a viewer where a user is allowed to see a marked-up file in a newly
renarrated manner
+++ for this to happen, the user is identified as part of a viewer
ontology called 'v'. Initially we will pre-define this ontology as a
simple data-structure. Over time this will evolve into a more
elaborate ontology that is user definable.
+++ there is also a rules for renarration 'r' that we will be using to
define how one must transform a marked-up content. This can be quite
elaborate. However, for the initial round, we will fix this to be a
simple structure and evolve it into a more complex ontology over time.
</p>
</div>
</div>
<div id="outline-container-2-2" class="outline-3">
<h3 id="sec-2-2"><span class="section-number-3">2.2</span> roadmap of activity</h3>
<div class="outline-text-3" id="text-2-2">
<p>This Semantic Style Sheet system will be developed in releases called
r0, r1, r2, r3…
</p>
<ul>
<li>r0 - basic implementation of a python server, client side pages to
input URLs, view web pages
</li>
<li>r1 - ability to markup a web page, adding a simple 'd'
</li>
<li>r2 - ability to persist the markup done in r1 (database)
</li>
<li>r3 - ability to input 'v' and 'r'
</li>
<li>etc.
</li>
</ul>
</div>
</div>
<div id="outline-container-2-3" class="outline-3">
<h3 id="sec-2-3"><span class="section-number-3">2.3</span> r0 - release 0 requirement</h3>
<div class="outline-text-3" id="text-2-3">
<ul>
<li>To develop a client server app using Python backend.
</li>
<li>The UI should be sufficient to take on a URL.
</li>
<li>There should be an ability to view a userinput page.
</li>
</ul>
<p>
To develop a SweetApp. Aim of the app would be able to manipulate
Sweets. By manipulation I mean that I should be able to create and
query sweets of my own making. They should be independent of any
specific Sweet App.
</p>
</div>
</div>
</div>
<div id="outline-container-3" class="outline-2">
<h2 id="sec-3"><span class="section-number-2">3</span> Design</h2>
<div class="outline-text-2" id="text-3">
<p>This pilot, experimental appliction is designed as a client server web
application. There is a server side and a client side to it. The
inspiration for this work comes from looking at other Sweet based apps
like Alipi, Swtr and Restory. These can be found [here :
<a href="https://github.com/janastu">https://github.com/janastu</a>] on github at janastu.
</p>
</div>
<div id="outline-container-3-1" class="outline-3">
<h3 id="sec-3-1"><span class="section-number-3">3.1</span> installation information</h3>
<div class="outline-text-3" id="text-3-1">
<ul>
<li>assuming we have Python, Flask, Jinja2, MongoDB already installed
</li>
<li>tangle the SweetSai.org file to get codeblocks. Some will be in the
current directory, some will be in ./app directory, yet others in
./app/static, ./app/templates, ./app/static/css, and in
./app/static/js directories.
</li>
</ul>
</div>
</div>
<div id="outline-container-3-2" class="outline-3">
<h3 id="sec-3-2"><span class="section-number-3">3.2</span> execution information</h3>
<div class="outline-text-3" id="text-3-2">
<ul>
<li>the app will run on local host at 127.0.0.1:5000 port
</li>
<li>to run we need to activate the virtual environment of sweetEnv by
typing ./sweetEnv/bin/activate
</li>
<li>to deactivate the virutatal environment, type in deactivate
</li>
<li>to execute this application, type in the virtual environment, the
following: python SweetSai.py. Go to a browser and look for the app
running at the 127.0.0.1:5000 local address.
</li>
</ul>
</div>
</div>
<div id="outline-container-3-3" class="outline-3">
<h3 id="sec-3-3"><span class="section-number-3">3.3</span> server side</h3>
<div class="outline-text-3" id="text-3-3">
<p>Initial design choices are based on reference works already done for
Sweets and similar apps. Some choices of technology include
</p><ul>
<li>Python 2.7 for scripting
</li>
<li>Flask (micro web development environment)
</li>
<li>WTF for forms
</li>
<li>Requests library for creating / handling HTTP requests
</li>
<li>sqlite database - I am using sqlite database for my work. For this
we need to have Flask-sqlalchemy and sqlalchemy-migrate packages
installed. As each database is stored in a single file and there is no need to start a database server, this is a
</li>
</ul>
<p>good choice for our application.
</p><ul>
<li>I am also opting to use MongoDb for persistence of information.
</li>
</ul>
<p>
When working with Node.js for AngularJS, I used npm package manager.
</p>
</div>
<div id="outline-container-3-3-1" class="outline-4">
<h4 id="sec-3-3-1"><span class="section-number-4">3.3.1</span> CORS</h4>
<div class="outline-text-4" id="text-3-3-1">
<p>In our initial part of the development we only needed to display the
Sweets that we could GET via the front-end app from the existing
back-end swtrstore (Sweet Store). To do this we could conceptually just rely on the frontend, which would be
develop using JavaScript. This would make HTTP GET request to the
Sweet Store and fetch us the HTML page with the Sweets, and then
essential display this gathered info.
</p>
<p>
There is one challenge to this design approach - CORS. CORS security
check would forbid the browser to do a cross-domain request to the
Sweet Store. That is, by design a Client (browser) should be
contacting the Server (Sweet Store). However, the Sweet Store server
(due to CORS) will not trust our domain and not accept our HTTP
requests.
</p>
<p>
To overcome this, we are actually not anymore calling the Sweet Store
from the front-end web browser, but actually calling the store from
this back-end or server-side code.
</p>
<p>
Due to this, we need to make our Client (Browser) talk to
our own trusted Server (written up in Python/Flask) and then, in turn,
have that local server be registered with Sweet Store as a trusted
domain and then, finally, have our trusted local domain work with Sweet
Store. The exchange between our trusted local domain Server and our
Client browser can happen using JSON objects - which need to be
formatted by the client for viewing on the client side. Essentially
the connectivity then is from our BrowserClient to our trusted Local
Server. This is in JSON. Then, our trusted Local Server then connects
with Sweet Store directly using Python/ Flask based HTTP protocol
(which does not incur CORS treatment).
</p>
<p>
Here a Python code makes a request to the Sweet store, gathers the
Sweets from that using an API. This gathered info is in the form of a
JSON object. This sweet store furnished JSON object would then be
filtered on the front-end and then displayed.
</p>
<p>
If we just seek the <a href="http://teststore.swtr.us">Sweet Store Page</a>, we get the HTML output. But, we
can actually call in the API <a href="http://teststore.swtr.us/api/sweets/q?who=SaiGo">here</a>. This is where the Sweet Store API
rests. This API allows us to fetch the JSON objects.
</p>
</div>
</div>
<div id="outline-container-3-3-2" class="outline-4">
<h4 id="sec-3-3-2"><span class="section-number-4">3.3.2</span> SWeet Store API</h4>
<div class="outline-text-4" id="text-3-3-2">
<p>Normal Sweet Store HTML page is available at
<a href="http://teststore.swtr.us">http://teststore.swtr.us</a>. The API is available at <a href="http://teststore.swtr.us/api/sweets/q?who=SaiGo">http://teststore.swtr.us/api/sweets/q?who=SaiGo</a>
Post "q?" one can query who=<userid>, or what=<context>, or
where<url>. Or, have a combination of all of these. The connector is
the "&" symbol.
</p>
<p>
The object that is returned will be a JSON object.
</p>
</div>
</div>
</div>
<div id="outline-container-3-4" class="outline-3">
<h3 id="sec-3-4"><span class="section-number-3">3.4</span> client side</h3>
<div class="outline-text-3" id="text-3-4">
<p>??Angular JS framework is being used for doing the FrontEnd JavaScript
development. For AngularJS package management (in the front-end), I
use Bower. Bower is to AngularJS what "npm" is to Node.js (in the
back-end). I use "Karma" the test runner for my Angular JS front-end.
</p>
</div>
</div>
<div id="outline-container-3-5" class="outline-3">
<h3 id="sec-3-5"><span class="section-number-3">3.5</span> Software Engineering aspects</h3>
<div class="outline-text-3" id="text-3-5">
<p>Software Engineering design choices include
</p><ul>
<li>using emacs-org-mode for Literate Programming
</li>
<li>using Virtual Environments
</li>
<li>developing the app in multiple releases r0, r1, r2…
</li>
</ul>
</div>
</div>
</div>
<div id="outline-container-4" class="outline-2">
<h2 id="sec-4"><span class="section-number-2">4</span> implementation</h2>
<div class="outline-text-2" id="text-4">
</div>
<div id="outline-container-4-1" class="outline-3">
<h3 id="sec-4-1"><span class="section-number-3">4.1</span> basic layout & structure</h3>
<div class="outline-text-3" id="text-4-1">
<p>Some of the coding and structure for this work has been inspired by a
tutorial by Miguel grinberg.
[http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iii-web-forms:
Here] is that tutorial.
</p>
<p>
Directory structure for this app is like this:
SweetSai/sweetEnv - for Virtual Environment
SweetSai/app - for packages
SweetSai/app/templates - for web based templates; html files
SweetSai/app/static - for static files
</p>
<p>
The development of this work has been done in two parts: Editor and
Viewer. Both have been implemented in the MVC design pattern.
</p>
</div>
</div>
<div id="outline-container-4-2" class="outline-3">
<h3 id="sec-4-2"><span class="section-number-3">4.2</span> Editor</h3>
<div class="outline-text-3" id="text-4-2">
<p>Editor has been implemented as a portal using Python, Flask, Jinja2
framework. It is being executed in a virtual environment.
</p>
</div>
<div id="outline-container-4-2-1" class="outline-4">
<h4 id="sec-4-2-1"><span class="section-number-4">4.2.1</span> model (database work)</h4>
<div class="outline-text-4" id="text-4-2-1">
<ul>
<li id="sec-4-2-1-1">database related files<br/>
We chose sqlite database for our work. we had to update the config file with sqlite database related
constants: SQLALCHEMY<sub>DATABASE</sub><sub>URI</sub> and SQLALCHEMY<sub>MIGRATE</sub><sub>REPO</sub>.
<p>
we intialize our database in our init.py file.
</p>
<p>
our database is expressed as objects. This is defined in our models.py
file.
</p></li>
</ul>
<ul>
<li id="sec-4-2-1-2">models.py file<br/>
In the MVC architecture, this part – dealing with models – relates
to the models of the database and app that i have used.
<pre class="example">from app import db
# creating an object for a table named User
class User(db.Model):
id = db.Column(db.Integer, primary_key = True)
login_name = db.Column(db.String(64), index=True, unique=True)
login_emailID = db.Column(db.String(120), index=True, unique=True)
sweets = db.relationship('Sweet', backref='author', lazy='dynamic')
# should the user be allowed to authenticate?
def is_authenticated(self):
return True
# banned users can be considered inactive
def is_active(self):
return True
# fake users who are not allowed to even log on
def is_anonymous(self):
return False
# returns a unique identifier for user
def get_id(self):
try:
return unicode(self.id) # python 2
except NameError:
return str(self.id) # python 3
def __repr__(self):
return '<User %r>' % (self.login_name)
class Sweet(db.Model):
id = db.Column(db.Integer, primary_key=True)
# the "s" in front represents the notion of a "sweet"; these are
# attributes of a "sweet"
sUsrname = db.Column(db.String(64), index=True, unique=True) #this is the Sweet user name
sUrl = db.Column(db.String(320), index=True, unique=True)
sContext = db.Column(db.String(64), index=True, unique=True)
sAttrib = db.Column(db.Text, index=True, unique=True)
sTimestamp= db.Column(db.DateTime)
sUser_id = db.Column(db.Integer, db.ForeignKey('user.id'))
def __repr__(self):
return '<Sweet %r>' % (self.sUsrname)
</pre>
</li>
</ul>
<ul>
<li id="sec-4-2-1-3">Table of Users<br/>
Definition for User table
<pre class="example"># creating an object for a table named User
class User(db.Model):
id = db.Column(db.Integer, primary_key = True)
login_name = db.Column(db.String(64), index=True, unique=True)
login_emailID = db.Column(db.String(120), index=True, unique=True)
sweets = db.relationship('Sweet', backref='author', lazy='dynamic')
# should the user be allowed to authenticate?
def is_authenticated(self):
return True
# banned users can be considered inactive
def is_active(self):
return True
# fake users who are not allowed to even log on
def is_anonymous(self):
return False
# returns a unique identifier for user
def get_id(self):
try:
return unicode(self.id) # python 2
except NameError:
return str(self.id) # python 3
def __repr__(self):
return '<User %r>' % (self.login_name)
</pre>
</li>
</ul>
<ul>
<li id="sec-4-2-1-4">Table of Sweets<br/>
Definition for Sweet table. creating an object for a table named
Sweet. Sweet has its own ID… but it also has a link with User table one User can scribe multiple Sweets
<pre class="example">class Sweet(db.Model):
id = db.Column(db.Integer, primary_key=True)
# the "s" in front represents the notion of a "sweet"; these are
# attributes of a "sweet"
sUsrname = db.Column(db.String(64), index=True, unique=True) #this is the Sweet user name
sUrl = db.Column(db.String(320), index=True, unique=True)
sContext = db.Column(db.String(64), index=True, unique=True)
sAttrib = db.Column(db.Text, index=True, unique=True)
sTimestamp= db.Column(db.DateTime)
sUser_id = db.Column(db.Integer, db.ForeignKey('user.id'))
def __repr__(self):
return '<Sweet %r>' % (self.sUsrname)
</pre>
</li>
</ul>
<ul>
<li id="sec-4-2-1-5">db Creation script file: db<sub>create</sub>.py<br/>
Here is a python script that creates the database
<pre class="example">#!sweetEnv/bin/python
# the source for this comes from
# http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iv-database
# this is a database migration script used for moving from one to
# another version of a database
from migrate.versioning import api
from config import SQLALCHEMY_DATABASE_URI
from config import SQLALCHEMY_MIGRATE_REPO
from app import db
import os.path
db.create_all()
if not os.path.exists(SQLALCHEMY_MIGRATE_REPO):
api.create(SQLALCHEMY_MIGRATE_REPO, 'database repository')
api.version_control(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
else:
api.version_control(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO, api.version(SQLALCHEMY_MIGRATE_REPO))
</pre>
<p>
to create the database we just need to run the following python
command in our virtual environment:
</p>
<pre class="example">./db_create.py
</pre>
<p>
This will create a database with the label app.db file. This will be a
sqlite database. the script will also create a directory called
"db<sub>repository</sub>". This new directory wiill store the db migration files.
</p>
</li>
</ul>
<ul>
<li id="sec-4-2-1-6">db Migration script file: db<sub>migrate</sub>.py<br/>
migration is implemented to allow us to (in the future) to change the
model of the database. Here is a script in python to facilitate that.
<pre class="example">#!sweetEnv/bin/python
import imp
from migrate.versioning import api
from app import db
from config import SQLALCHEMY_DATABASE_URI
from config import SQLALCHEMY_MIGRATE_REPO
v = api.db_version(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
migration = SQLALCHEMY_MIGRATE_REPO + ('/versions/%03d_migration.py' % (v+1))
tmp_module = imp.new_module('old_model')
old_model = api.create_model(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
exec(old_model, tmp_module.__dict__)
script = api.make_update_script_for_model(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO, tmp_module.meta, db.metadata)
open(migration, "wt").write(script)
api.upgrade(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
v = api.db_version(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
print('New migration saved as ' + migration)
print('Current database version: ' + str(v))
</pre>
<p>
To ensure proper migration tracking, try to not rename existing
fields. Limit changes to addition / deletion of fields only. Typing
can also be changed. Generated migration script can also be checked to
see if it is correct.
</p>
<p>
migration script can be run by executing the following python script
in our virtual environment
</p>
<pre class="example">./db_migrate.py
</pre>
<p>
The script has print statements to show where the migration has been
stored. version number is also displayed by this script.
</p>
</li>
</ul>
<ul>
<li id="sec-4-2-1-7">db upgradation script file: db<sub>upgrade</sub>.py<br/>
This python script upgrades the sqlite database to the latest revision.
<pre class="example">#!sweetEnv/bin/python
from migrate.versioning import api
from config import SQLALCHEMY_DATABASE_URI
from config import SQLALCHEMY_MIGRATE_REPO
api.upgrade(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
v = api.db_version(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
print('Current database version: ' + str(v))
</pre>
</li>
</ul>
<ul>
<li id="sec-4-2-1-8">db downgrade script file: db<sub>downgrade</sub>.py<br/>
This python script downgrades the sqlite database by one version.
<pre class="example">#!sweetEnv/bin/python
from migrate.versioning import api
from config import SQLALCHEMY_DATABASE_URI
from config import SQLALCHEMY_MIGRATE_REPO
v = api.db_version(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
api.downgrade(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO, v - 1)
v = api.db_version(SQLALCHEMY_DATABASE_URI, SQLALCHEMY_MIGRATE_REPO)
print('Current database version: ' + str(v))
</pre>
</li>
</ul>
</div>
</div>
<div id="outline-container-4-2-2" class="outline-4">
<h4 id="sec-4-2-2"><span class="section-number-4">4.2.2</span> view</h4>
<div class="outline-text-4" id="text-4-2-2">
<p>This code represents the actions to be taken by the webapp when
various views are encountered.
</p>
<pre class="example">from flask import (render_template,
flash,
redirect,
session,
url_for,
request,
g,
abort )
from flask.ext.login import (login_user,
logout_user,
current_user,
login_required )
from app import app, db, lm
from .forms import get_swtIDForm, MyForm, LoginForm, InputURLform
from .models import User
import requests
@app.before_request
def get_current_user():
g.user = None
email = session.get('email')
if email is not None:
g.user = email
@app.route('/')
@app.route('/index')
def home_page():
form = MyForm()
return render_template('welcome.html', form=form)
@app.route('/showPg')
def showURL_page():
return render_template('showPg.html',
title='user_entered_page',
url='www.google.com')
@app.route('/editor', methods=['GET', 'POST'])
def my_editor():
form = InputURLform(request.form)
# this is activated when the form is filled by user
if request.method == 'POST' and form.validate():
url = form.url.data
return redirect('showPg.html',
title='user_entered_page',
url=url)
return render_template('inputURLform.html',
title='input URL',
form=form)
@app.route('/_auth/login', methods=['GET', 'POST'])
def login_handler():
"""This is used by the persona.js file to kick off the
verification securely from the server side. If all is okay
the email address is remembered on the server.
"""
resp = requests.post(app.config['PERSONA_VERIFIER'], data={
'assertion': request.form['assertion'],
'audience': request.host_url,
}, verify=True)
if resp.ok:
verification_data = resp.json()
if verification_data['status'] == 'okay':
session['email'] = verification_data['email']
return 'OK'
abort(400)
@app.route('/_auth/logout', methods=['POST'])
def logout_handler():
"""This is what persona.js will call to sign the user
out again.
"""
session.clear()
return 'OK'
@app.route('/get_swtID', methods=['GET', 'POST'])
def get_swtID():
form = get_swtIDForm()
return render_template('get_swtID.html',
title='Sign In',
form=form)
@app.route('/login', methods=['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
login_user(user)
flask.flash('logged in successfully')
next = flask.request.args.get('next')
if not next_is_valid(next):
return flask.abort(400)
return flask.redirect(next or flask.url_for('/index'))
return render_template('login.html', form=form)
@app.route('/submit', methods=('GET', 'POST'))
def submit():
form = MyForm()
if form.validate_on_submit():
return redirect('/success')
return render_template('submit.html', form=form)
@lm.user_loader
def load_user(id):
# user Id from Flask-Login is unicode, thats why we need to convert
# to int before sending it to database (SQLAlchemy) pkg
return User.query.get(int(id))
if __name__ == '__main__':
app.run()
</pre>
<ul>
<li id="sec-4-2-2-1">View for my editor<br/>
Editor is basically a web portal. It has an ability to markup a web
page. User inputs the web page by typing in an URL in a text box. The
web page is marked up along the lines of the data structure 'd' of our
transformation function.
<p>
Here is the backend view for inputing the URL by the user. This URL is the