CSCI 1320 Creating Modern Web Applications. Content Management Systems

Size: px

Start display at page:

Download "CSCI 1320 Creating Modern Web Applications. Content Management Systems"

Chloe McGee
6 years ago
Views:

1 CSCI 1320 Creating Modern Web Applications Content Management Systems

2 Brown CS Website 2

3 Static Brown CS Website Up since M files (inodes) 1.6 TB of filesystem space 3

4 Static HTML Generators Convert plain-text markup to HTML e.g. Markdown Advantages Templating Versioning with git Secure Fast Disadvantages Not interactive Must use markup 4

5 Static HTML Generators Website Meta Language debian.org HTML HTML Nine passes! #include <csdept.wml> title="down For Maintenance" <h1>down For Maintenance</h1> <p> <b>we'll be back in just a few minutes...</b> </p> C preprocessor HTML macro expansion Embedded Perl An h1 header ============ Sane choices available, too Paragraphs are separated by a blank line. 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists look like: Jekyll Markdown HTML * this one * that one * the other one 5

6 Content Management System What does that mean really? Document Management System Enterprise Content Management System Web Content Management System Wiki Blog Digital Asset Management CMS Web application for website publishing 6

7 One App or Many? Monolithic App (+ plugins) Web Framework WordPress Multiple apps on one server Reverse Web Proxy Multiple apps on multiple servers appear as one site 7

8 CMS == Web Application Framework WordPress Plugin or Extension Framework Application Django HTML Plugin Slideshow Library Application Application Application Libraries Jinja2 8

9 Reverse Proxy Web server directs traffic Presents a unified view of separate applications Can short-circuit static content GI S W Internet HTML Web server FastX HT M Blog Database Database L Web server Filesystem CMS 9

10 CS Website Applications cs.brown.edu Static Content Django-cms nginx proxy Featurebox csdept django site Django-cms Zinnia blog 49 django apps in all RSS Plugin Zinnia Plugin Old apache static site /web/cs/web ICal Plugin 10

11 CS Web Server Topology How a 404 happens HTTP No web proxy django app server I WSG No HTT P Postgresql No Fi le? N o? No e Fil apache static server NFS 11

extensions But they are more flexible Monolithic

12 Some Assembly Required CMSes based on frameworks can require more setup Separate apps, modules, extensions But they are more flexible Monolithic apps are quick to deploy WordPress, of course 12

13 Web Content Management System Features Templates Roles and permissions In-browser editing Publishing workflow Asset management Versioning Language support 13

14 CMS Features Template Engines V in MVC Separate presentation from application logic Render an object or objects Template = HTML + some markup Break down page design into reusable pieces Separate graphic designer from developer chaos Lots of choices Jinja2 Template Toolkit Django 14

15 Django Template Engine base.html {% block footer %}{% endblock %} page.html {% load cms_tags sekizai_tags %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>{% block pagetitle %}{% endblock %}</title> {% block meta %} <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> {% endblock meta %} {% block stylesheet %}{% endblock %} {% render_block "css" %} {% block link %}{% endblock %} {% block headjs %}{% endblock %} </head> {% block body_tag %}<body>{% endblock %} {% cms_toolbar %} {% block header %}{% endblock %} {% block nav %}{% endblock %} <div id="middle"> {% block middle %} {% block sidebar %}{% endblock %} {% block content %}{% endblock %} {% endblock middle %} </div> {% block footer %}{% endblock %} {% block javascript %}{% endblock %} {% render_block "js" %} {% include "ga.html" %} </body> </html> {% extends base.html %} {% block content %}stuff{% endblock %} base.html defines block content extends page.html only touches block content 15

16 CMS Features Roles and Permissions Authentication Who are you? registration, LDAP, Shibboleth, Facebook Roles Admin Author Editor 16

17 CMS Features Roles & Permissions Authorization What are you allowed to do? Pages have owners Distinct privileges for viewing, creating, editing, publishing, moving, changing ownership, changing permissions Hiding Complexity Complex interface for admin Simple interface for authors Don't show me things I can't do 17

18 CMS Features In-browser Editing Separate admin or on-page editing? Ajax Editors Layout and Styling What, not how Images and media Upload Asset manager Plugins e.g. Google Map 18

19 CMS Features Publishing Workflow Content lifecycle Draft content Notifications Submitted for approval Approved/rejected Create Edit No Approve Scheduled publishing Publish Unpublish on Yes Publish Update 19

20 CMS Features Asset Management Media & documents Images, video Pdf, Word, Spreadsheets Avoids duplication Metadata Ownership Permissions Copyright Search Extra step for authors 20

21 CMS Features - Versioning Oops! Page history Shows who did what, when Revert to previous page 21

22 CMS Features More Good Things Multilingual Multi-site Multiple sites running on one server Hierarchical pages (tree-like) Multiple versions of site in different languages With heirarchical permissions Friendly URLs RESTful 22

23 Choices! So many to choose from: Php Java Python Perl Ruby 23

24 CMS Market Share WordPress 58.8% Joomla! 7.1% Drupal 4.7% Everyone else 24

25 QWERTY Keyboard E A S T I O H N 25

26 Ubiquity Qwerty designed in 1873 Optimized for either Avoiding mechanical jams Telegraph operators 26

27 Path Dependence From economics Making optimal choices History matters because... Switching is hard Optimal? English measurement system X86 instruction set PHP Javascript The whole web stack 27

28 LAMP Linux Apache MySQL Php The ubiquitous platform Default on hosting companies everywhere 28

29 Why Django-cms? Good enough WordPress probably still easiest to use Django framework We build our own apps Brown user profiles Courses DIYTube Strong community Secure, ORM, etc... 29

Blog site (cont.) theme, 202 view creations, 205 Browser tools, 196 Buytaert, Dries, 185

Blog site (cont.) theme, 202 view creations, 205 Browser tools, 196 Buytaert, Dries, 185 Index A Administration, 157 backups and restore (see Backups and restore website) file system, 161 log files, 162 tasks, 157 updates and security patches, 165 user accounts, 166 Aggregator module, 218