Front end and Back end tools - PowerPoint PPT Presentation


PPT – Front end and Back end tools PowerPoint presentation | free to download - id: 8843aa-YzhkY


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Front end and Back end tools


Web Engineering Lecture-5 – PowerPoint PPT presentation

Number of Views:403
Slides: 38
Provided by: inam12


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Front end and Back end tools

Front-end Development Tools
  • Lecture Web Engineering
  • BSIT-5th University of Education Okara
  • Post questions at
  • Frontend dev. tools http//

  • Distinguish between using a text editor
    (notepad) and using a GUI markup language
    editor (Dreamweaver)
  • Identify Web page design issues
  • Identify front-end and back-end Web issues

Lesson1 Creating Web Pages
  • The need for skills in Web-based technologies
  • Contribute to team projects
  • Create Web pages
  • Create résumés
  • You must know at least the following markup
  • Hypertext Markup Language (HTML)
  • Cascading Style Sheet (CSS)
  • Extensible HTML (XHTML)

Additional Web Page Elements
  • Web pages use more than HTML or XHTML --
    additional technologies include
  • Flash
  • (macromedia or shockwave flash for multimedia and
  • Java
  • Preferably java scripts and JSP (server side)
  • ActiveX
  • software framework created by Microsoft that
    adapts its earlier Component Object Model (COM) 
  • Introduced in 1996 and commonly used in
    its Windows OS
  • You must also understand how Web pages use
  • Databases
  • any student should practically connect webpage
    with database
  • Common Gateway Interface (CGI)
  • Detail on next slide

CGI (server side)
  • CGI is used for many purposes
  • To help Web pages pass information to and from
  • To provide active content (e.g., hit counters)
  • Examples of CGI technology include
  • Perl, PHP, ASP, JSP, .NET
  • Server-Side JavaScript (SSJS), ColdFusion google

Text Editors Markup Languages
  • You do not need to use a special editor
    application to create markup
  • You can use a simple text editor (e.g., Notepad
    or Vi)
  • When creating HTML or XHTML files, you must
  • Save the file using either the .html or .htm file
    name extension

GUI HTML Editors
  • GUI HTML editors
  • Create HTML/XHTML code for you
  • You type page text as you would with a standard
    word processor
  • You point and click with a mouse
  • Examples
  • Adobe Dreamweaver
  • Microsoft FrontPage
  • SeaMonkey Composer
  • And many more http//
  • Adobe GoLive

Front-End Issues
  • A Web page is an interface that should
  • Provide a distinct message
  • Be accessible by all users
  • Incorporate appealing images and graphical
  • Include constantly updated hyperlinks
  • Use tables wisely ?
  • Present carefully designed Web forms (how?)
  • Connect pages to databases securely
  • Use the most current technologies appropriately
  • Use images sparingly (why)
  • Be easily navigable and without dead ends
  • Include alternative navigation ?

Web Page Accessibility
  • An accessible Web page has
  • A user-friendly and accessible front end (see
    pics 1,2,3,4)
  • Back-end server resources that process and store
    user input
  • The WC3 estimates that up to 10 percent of people
    have disabilities that, if not accommodated by
    Web sites, can cause companies to lose
    significant amounts of revenue (usability issue)
  • Why adhere to accessibility standards?
  • It makes your site available to all users
  • You can be penalized for failing to provide
    accessibility, either by losing customers or
    through government-imposed fines

Note wc3 is an international community where
Member organizations, a full-time staff, and the
public work together to develop web related
Wiki Site
  • A Web site that allows all visitors to
    collaborate in its construction
  • Wiki software is installed on a Web server
  • You can lock down certain pages and leave others
    open to editing
  • Wiki examples
  • Wikipedia (
  • (http//
  • MemoryAlpha (http//

Back-End Issues
  • Database connectivity
  • Types of databases
  • Web servers use relational databases to store
  • Relational databases
  • Creating relational databases
  • Relational database vendors
  • Databases, Web servers and SQL (who will tell?)

Naming Web Page Files
  • Web servers search for default page names
  • Default page names include
  • index.html
  • index.htm
  • default.htm
  • default.asp
  • Readme.txt why to hide?
  • Default page names can change from server to
  • Apache Server -- usually index.html
  • IIS -- usually default.htm, default.html or

HTTP 404 File Not Found Error
  • Indicates that a user has requested a file that
    does not exist on the specified Web server
  • Generated by the server
  • Can be customized

Creating and Documenting an Initial Web Site Plan
Lesson 2Markup Language and Site Development
  • Site plan is a rough outline of planned
  • Site diagram (sitemap), see html link diagram on
    next slide
  • Storyboard
  • Eventually becomes a site map for completed site
  • Determining audience and message
  • Validating design issues
  • Consider issues such as central message, fonts,
    images, colors, ethnic and cultural diversity,
    and common color schemes

HTML Link Diagram (sitemap)
Obtaining Relevant Input from Stakeholders
  • Stakeholders are relevant organization employees
    or contributors who can provide or help
  • The purpose of the Web site
  • The services that the audience requires from the
  • Development timelines
  • As you work with stakeholders
  • Remember that non-technical people may be asked
    to approve your project
  • You must translate technical issues into
    non-technical language
  • Team members can include representatives from
    marketing, IT, sales and other areas of your

Developing the Site
  • As your team develops the site, you will be
    engaged in various activities
  • Creating markup code
  • Testing functionality
  • Approving the site
  • Publishing the site

Testing Pages in Multiple Browsers
  • As you develop Web pages, test them using
    multiple Web browsers
  • Different generation of the same browser may
    interpret HTML somewhat differently
  • Browser vendors also implement standards
  • Browser types include
  • Microsoft Internet Explorer
  • Mozilla Firefox
  • Netscape Navigator
  • Lynx
  • Opera

Publishing the Site
  • To publish a site, you need to know
  • The IP address and/or DNS name of the site
  • (I dont know my sites DNS name)
  • User name and authentication informationlogin
  • The destination directory (i.e., folder) on the
    Web server
  • Space requirements web hosting
  • The protocol you will use to upload the site
  • Working with service providers ?

Good Coding Practice
  • Create code that can be easily read by others
  • Exceptions
  • Some code might encounter problems if it includes
    random spaces
  • Always test your code in multiple browsers and
    validate it
  • Adding hidden comments
  • lt!-- Text inside of these brackets will
    not appear --gt
  • Use comments to annotate code or document changes

Extending HTML
Lesson 3 Advanced Web Technologies
  • Client-side and server-side scripting
  • Connecting to databases
  • Additional ways to apply Cascading Style Sheets
  • Dynamic HTML (DHTML)
  • Document Object Model (DOM)

Server-Side Languages
  • Attributes of server-side language
  • Code is executed by the Web server, not the Web
  • Code executes because an interpreter has been
    installed and activated on the Web server
  • Server-side scripts are used for various
  • Browser detection
  • Database connectivity
  • Cookie creation and identification
  • Logon scripts
  • Hit counters
  • File uploading and downloading

PHP Hypertext Preprocessor (PHP)
  • An interpreted server-side scripting language for
    creating dynamic Web pages
  • Embedded in HTML pages but usually executed on a
    Web server
  • Example of PHP code
  • lt?php
  • envVars array("HTTP_USER_AGENT")
  • foreach(envVars as var)
  • print "
  • lthtmlgtltheadgtlttitlegtPHP CGI Examplelt/titlegtlt/hea
  • lth1gtHello, World!lt/h1gt
  • Your user agent
  • ltbr/gt
  • lt/bodygtlt/htmlgt
  • "
  • ?gt

Practical Extraction and Report Language (Perl)
  • Another server-interpreted language
  • Older, but very popular
  • Example of Perl code
  • !/usr/bin/perl
  • use CGI qw/all/
  • cgi_object CGInew()
  • print "Content-type text/html\n\n"
  • print "lthtmlgt\nltheadgt\nlttitlegt\nPerl CGI
  • Example\nlt/titlegt\nltbodygt\nlth1gtHello,
  • World!lt/h1gt\nYour user agent is ltbgt\n"
  • print cgi_object-gtuser_agent()
  • print "lt/\n"

Active Server Pages (ASP) using VBScript
  • Microsofts original server-side scripting
  • Example of ASP code using VBScript
  • lt_at_ LANGUAGEvbscript gt
  • lthtmlgt
  • ltheadgt
  • lttitlegtASP CGI Examplelt/titlegt
  • lt/headgt
  • ltbodygt
  • lth1gtHello, World!lt/h1gt
  • lt
  • path Request.ServerVariables("PATH_INFO")
  • pagename Request.ServerVariables("HTTP_HOST")
  • method Request.ServerVariables("REQUEST_METHOD
  • browser Request.ServerVariables("HTTP_USER_AGE
  • user Request.ServerVariables("REMOTE_ADDR")

  • Object-oriented
  • Compiled
  • Platform-independent
  • Marketing Write once, run anywhere
  • Reality Write once, test everywhere
  • Java can be used to write
  • Stand-alone applications
  • Servlets
  • JavaServer Pages (JSP)

Visual Basic
  • A compiled programming language developed by
    Microsoft Corporation
  • Used for stand-alone applications and server-side
    Web applications
  • Once only procedural, now has object-based

  • Object-oriented
  • Compiled
  • Platform-dependent
  • Used for Microsoft .NET program

Server Side Includes (SSIs)
  • An instruction inside of an XHTML/HTML page that
    directs the Web server to perform an action
  • An alternative to CGI
  • SSI instructions are in SGML
  • Can be used to
  • Place the results of a database query into a page
  • Execute other programs
  • Indicate the last time a document was modified
  • Insert footer text at the bottom of a page
  • Add the current date as a timestamp to a page

Server Side Includes (SSIs) (contd)
  • Standard SSI file name extensions
  • .shtml
  • .shtm
  • SSI support in Web servers
  • Most Web servers include code that enables SSI
  • However, the SSI feature may be disabled
  • You may have to activate the feature
  • You may also have to define a MIME type

Client-Side Languages
  • Issues with client-side languages
  • Some clients do not support JavaScript or any
    other such scripting language
  • Users can deactivate script execution in browsers
    that normally support it

  • Object-based
  • Adds interactivity to Web pages
  • Can also be used on the server side (Server-Side
    JavaScript, SSJS)
  • On the client side, can be used to
  • Detect browsers
  • Create cookies
  • Create mouse rollovers
  • JavaScript advantages
  • Platform-independent
  • Vendor-neutral
  • Relatively simple
  • JavaScript and cookies
  • Cookies are stored on the hard drive
  • Cookies can be used to
  • Store passwords
  • Store user preferences
  • Choose which Web pages will be displayed based on
    browser version

JavaScript (contd)
  • lthtmlgt
  • ltheadgtlttitlegtMy Pagelt/titlegtlt/headgt
  • ltbodygt
  • ltscript language"JavaScript"gt
  • document.write('This is my first ?
  • JavaScript Page')
  • lt/scriptgt
  • lt/bodygt
  • lt/htmlgt

  • Microsofts answer to JavaScript
  • Can be used on the client side or the server side
  • If used on the client side, only Internet
    Explorer can render the script

Connecting to a Database
  • For a database to work, you must
  • Provide a way for the Web server and database to
    recognize each other
  • Microsoft systems can use ODBC
  • Other methods include PHP scripts
  • Provide permissions to the database so it can be
    read and/or written to
  • You must also supply SQL scripts

One mark assignment
  • Identify the standards organization that controls
    markup languages
  • Design a web architecture of your own topic
  • Define the concepts of creative design and
    demonstrate their importance to business