Content Management System for Social Networking Website - Courses

clappedtoyInternet and Web Development

Dec 7, 2013 (3 years and 8 months ago)

75 views

Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
Web Development
and some recent application trends.
+
D
r
u
p
a
l
i
n
s
t
a
l
l
a
t
i
o
n
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Web Development
•Developing a website for the Internet
Web design
Web content development
Web server/Network administration
Web scripting/programming
Security configuration
Marketing
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Web Industry Movement : Cost
Large businesses
Sell/Promote products and services
Automate workflow
Very fast growing
Here comes
LAMP
Small companies
/ individuals
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Web Industry Movement : Tools
HTML
WYSIWYG
Next generation
Web technology
Java
.NET
Plug-ins
Replacement of desktop applications
CMSIncrease in productivity
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Retrieving a Web Page
index.html
Return the HTML source to
be displayed by the browser.
Look up the file
index.html
index
.html
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Client-side Scripting
index.html
Return the HTML source to
be displayed by the browser.
index
.html
Em
b
e
d
d
e
d

w
i
t
h

s
c
r
i
p
t
s

i
n
t
e
r
p
r
e
t
e
d

b
y

b
r
o
w
s
e
r
s
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Server-side Scripting (phpexample)
index.php
Return the HTML source to
be displayed by the browser.
Compile the phpcode
Generate the HTML
source from the php
code
index
.php
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Client-side Coding Technology
Client Side Coding
Ajax
Provides new methods of using JavaScript, (egASP.Net or PHP) and other languages to
improve the user experience.
Flash
AdobeFlash Player
is a ubiquitous client-side platform ready forRIAs
.Flex2
isalso
deployedtotheFlashPlayer(version9+).
JavaScript
FormallycalledECMAScript,JavaScriptisa ubiquitousclientsideprogrammingtool.
JavaFX
isa softwareplatformforcreatinganddeliveringrichWebapplicationsthatcanalsorun
acrossa widevarietyofdevices.
MicrosoftSilverlight
Microsoft's browserpluginthatenablesanimation,vectorgraphicsandhigh-
definitionvideoplayback,programmedusingXAMLand.NETprogramminglanguages.
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Server-side Coding Technology
Server Side Coding
ASP
(Microsoft proprietary)
ColdFusion
(Adobe proprietary, formerly Macromedia)
CGI
and/orPerl
(open source)
C Server Scripts
(TrustLeapG-WAN, freeware)
Groovy (programming language)
Grails (framework)
Java
, e.g.JavaEE
orWebObjects
LotusDomino
PHP
(opensource)
Python
,e.g.Django(web framework)
(open source)
Ruby
, e.g.RubyonRails
(opensource)
Smalltalk
e.g.Seaside
,AIDA/Web
SSJS
Server-Side JavaScript, e.g.Aptana
Jaxer,Mozilla Rhino
Websphere
(IBM proprietary)
.NET
(Microsoft proprietary)
Purenode
Node-based website programming (proprietary)
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Web Development Timeline
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Web Industry Movement : Applications
Scientific info sharing
Online presence of businesses
Individual homepage
Online Store / E-commerce
Webboard/ Forum
Online storage
Webmail
Blog / Virtual community
Desktop app replacement
Social networking
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Social Network
Node = actor / people
Edge = relationship
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Social Networking Services
Focuses on
building online
communities
of people who:
Share interests/activities
Are interested in exploring
interests/activities of others
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Social Networking
•Discussions
•Photo Galleries
•Custom Profiles
•Personal Messaging
•…
Community
Collaboration
Contribution
I
nt
e
r
e
s
t
s

/

A
c
t
i
v
i
t
i
es
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Social Networking
A social network's members serve dual roles as
both the suppliersand the consumersof
content
Membership Charge
??
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Social Networking War
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Let’s build
our own site!
…and integrate facebookfeatures!
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
How Sites Use Facebook
http://developers.facebook.com/showcase/
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
CONTENT
MANAGEMENT
SYSTEM
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Web Content Management System
content
Content
management
Presentation
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Basic Content Management
•Create / edit / delete content
•Publish content to the public
•Provide / restrict access to content
•Define user roles and their permission to
manage content
•Manage different versions or drafts of
content
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Presentation-content Separation
Presentation 1
Presentation 2
Presentation 3
Welcome to your new Drupalwebsite!
Please follow these steps to set up and start using your website:
Configure your websiteOnceloggedin,visittheadministrationsection
,where you cancustomize and configure
all aspects of your website.
Enable additional functionalityNext,visitthemodulelist
andenablefeatureswhichsuityourspecificneeds.YoucanfindadditionalmodulesintheDrupalmodules
downloadsection
.
Customize your website designTochangethe"lookandfeel"ofyourwebsite,visitthethemessection
.You may choose from one of the included themes or download
additional themes from theDrupalthemes download section
.
StartpostingcontentFinally, you cancreate content
for your website. This message will disappear once you have promoted a post to thefront page.
For more information, please refer to thehelp section
, ortheonlineDrupalhandbooks
.You may also post at theDrupalforum
, orviewthewiderangeofother support
options
available.
Content
1
Template
& StyleSheet
2
Template
& StyleSheet
3
Template
& StyleSheet
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Drupal
•Used to build web sites
•Is a web content management framework
Open-source
Highly Modular
Extensible
Standard-compliant
Collaboration Emphasis
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Retrieving a Web Page
index.php
Return the HTML source to
be displayed by the browser.
Compile the phpcode
Generate the HTML
source from the php
code
Site parameters
Drupal
Framework
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Drupal’sTechnology Stack
Operating System
Web Server
Database
Language
Windows / Linux / BSD / Mac OS X / Solaris / …
IIS / Apache/ …
MySQL/ PostgreSQL/ …
PHP
Database Abstraction Layer
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Overriding, Overriding, Overriding
HTTP request
for a web page
Drupal’sdefault
behaviors
Custom overridden
behaviors
Resulting
web page
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
DrupalFramework
DrupalCore
Modules
Library of common functions
Basic required modules
Third-party modules
Optional modules
Overridden Files
Templates
Administrative Interface
Admin
Data
ThemeingParameters
Contents
Custom Data………
PHP functions
Other
Database UI
/ SQL Queries
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
DrupalCore
Basic Content
Management
User
Management
Session
Management
Templating
Syndication
Logging
* Not all are shown
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Additional Modules
WYSIWYG
Editor
Forums
Other Custom
Module
Image
Galleries
Event
Calendar
Extended
Content
Management
* Not all are shown
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Installing Drupal
Prepare a required computing platform
Download and place the Drupalcode
Setting up a Drupalsite through web browser
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Computing Platform
Selected components for this course:
http://www.php.net/downloads.php
http://httpd.apache.org/
http://dev.mysql.com/downloads/
http://www.phpmyadmin.net/
home_page/downloads.php
Web Server
Database
Server
Language
SQL Interface
Apache
Apache
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Set up Web Server
Install Database Server
(+ Launch the service)
Set up PHP
Computing Platform
Apache
Apache
Set up phpMyAdmin
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Setting Up Database
Create
+ a database
+ a database user
for Drupalto use
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Setting Up Database
A new empty database is built.
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Download and Place the DrupalCode
place
Your site subfolder
Web root folder
+ all files
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Setting Up Your Website
http://Your_Domain_Name/
http://Your_Domain_Name/2110496_09
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Setting Up Your Website
http://Your_Domain_Name/2110496_09
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Setting Up Your Website
Fill in the database set up previously
2110496_09
2110496_09
************************
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
The Site is Ready!
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Before Drupalinstallation
Once the
installation is
completed
Database is Ready!
Department of Computer Engineering, Chulalongkorn University
Atiwong Suchato
ContentManagementSystemforSocialNetworkingWebsite:DrupalHands-On
02
Assignment
•Installing Drupalon your machine
•Try playing around on your own