How are dynamic websites hosted 1

›Demo: 10 steps to your own mobile website
›Part 1: Mobile website with HTML, CSS, JavaScript and JSON

This demonstrator of the elab2go shows how your own mobile web application can be developed and hosted on a web server in 10 steps with the help of basic web technologies (HTML, CSS, JavaScript, JSON, PHP). Part 1: Mobile website with HTML, CSS, JavaScript and JSON deals with creating a static website with HTML, CSS, JavaScript and JSON. Part 2: Mobile dynamic website with PHP shows how a dynamic website with database connection is created using the PHP scripting language.

We explain the basics of languages ​​and how to use the libraries using the example of the mywebsite website of a fictitious service company. The website is created on the basis of a static HTML document, which is expanded to include interactive functionality through the use of the JavaScript scripting language, and the layout of which is specified in an external CSS file. By using media queries in the CSS stylesheet, the responsive design, i.e. the consideration of the requirements of the respective end device, of the website is implemented quickly and easily. The data exchange language JSON and the JavaScript library jQuery expand the functionality of the website by making it easier to handle data and are also used for responsive web design.

motivation

Mobile web design a must

In today's tablet and smartphone era, using a mobile design is a must. Content management systems such as TYPO3 are used for large websites, while modular systems are often used for smaller websites.

Problem: Dependency on the provider

The dependence on the offer of the provider and his choice of technologies limits the functionality of the technologies very much. Paid offers often have very powerful functionality that requires expert knowledge. On the other hand, free modular systems have severely limited functionality or show the branding of the provider.

Solution: Flexibility through web technologies

The use of basic web technologies to create a website offers more flexibility than the use of the web construction kit systems offered, as these often have a reduced range of technologies in the free version and the provider's labeling cannot be removed.

Our demo conveys in a simple and clear manner the knowledge required to make the flexibility and possibilities of the new web technologies accessible to beginners in website programming.

Preparation - programming platform and development environment

Modern web applications are developed using programming platforms and frameworks that support the development and execution of application programs. Programming platforms support standardized specifications for distributed software architectures and provide components, interfaces and various services so that software developers can start with an existing framework during implementation.
Frequently used programming platforms are the XAMPP stack, Java Enterprise Edition, the Java Spring Framework, and Microsoft .NET. In this demo we are using the XAMPP stack as this is the easiest to access for beginners.

The XAMPP package is an open source program package, consisting of the Apache web server, the MariaDB or MySQL database as a usable database, the syntax support for PHP and PERL. XAMPP is available for the Windows, Linux and MAC operating systems. XAMPP is not intended for use as a public web server, but for the development of a test system for a web application that is as fast and compact as possible. The components of the XAMPP package are installed without long configuration times and are immediately available.

For the development of smaller web applications it is sufficient to use a text editor with syntax support, e.g. Notepad ++. For larger applications, integrated development environments such as NetBeans or Eclipse can be used, which too Support in troubleshooting offer, being in this demo NetBeans is used.

Step 1 - Create a directory structure

Static web applications consist of a collection of linked HTML pages and other resources (images, videos), and may contain cascading style sheets for the layout and JavaScript programs for interactive content. Before creating a new website, a suitable directory structure should be created in which the files are stored. Images are stored in the images directory, CSS files in the css folder, and JavaScript files in the js folder. The files used in our example website are in the following directory structure:

Main folderSubfolderContent (files)
mywebsite/step 2index.html
/ step3aindex.html
/ step3a / cssmain.css
/ step3bindex.html
/ step3b / cssmain.css
/ step4index.html
/ step4 / cssmain.css
/ step5index.html
/ step5 / cssmain.css

Start pages of a web application are usually called index.html and have the special feature that the web server automatically returns the file index.html, i.e. the URL http: // www, when a URL request is made in the form http://www.mywebsite.de/ .mywebsite.de / index.html.

Step 2 - Create HTML Document

Digital documents that contain text, hyperlinks, images and videos are standardized on the WWW with the help of Hypertext Markup Language (HTML) described. HTML was proposed in 1989 by Tim Berners-Lee, the inventor of the WWW, and standardized and further developed in various versions by the W3C consortium. Most websites currently use versions 4.0, XHTML or the new version HTML 5. HTML documents have the file extension .html and .htm and can be read and displayed by any web browser. HTML is a descriptive markup language whose Language elements only form the structure of a WWW document indicate, i.e. how the information is structured (e.g. in areas, tables) and linked to other information (via links). Another language is required to design the layout of a WWW document: CSS stylesheets, see the next step.

An HTML document has a hierarchical structure and consists of three areas:

  • the Document type declarationthat specifies the document type definition (DTD) used
  • one Headboard (HEAD)containing information about the document. This information is not shown in the display area of ​​the browser.
  • the Body (BODY)that contains the visible information of the document.

The HTML language elements are divided into different categories, such as

  • Elements to describe the document structure: html, head, body
  • Elements for the page structure: body, header, h1, h2, h3
  • Elements for describing links: a
  • etc.

Each element of the HTML document is represented by a Tag pair (markup tags, tag = English label, marking), which consists of a start and an end tag. A start day begins with <, danach="" folgt="" der="" elementname="" und="" eine="" liste="" von="" tag-attributen,="" die="" auf="" die="" gewünschten="" werte="" gesetzt="" werden.="" ein="" end-tag="" beginnt="" mit="" <="" gefolgt="" vom="" elementnamen.="">Comments are started in HTML with & lt! - and ended with - & gt.

HTML document of the mywebsite example

In this section we use the index.html file from the directory mywebsite / step2 /

HTML file

website

  • Line 1 declares the document as an HTML type. The HTML document begins with the start tag , which defines the language as German as an attribute, and ends in line 15 with the end tag .
  • The header begins in line 3 and ends with line 5, this contains the title element for specifying the title of the document. The body element (lines 6-12) contains the information visible in the browser.
  • The text structuring element h2 divides the content into different sections with the headings specified in the h2 element and specifies the format (e.g. font, color and size) of the headings. The format of the displayed text is also specified by the text structuring element p. A line break is created with

, this text element only has a start tag and no end tag.

Step 3 - Create CSS stylesheet

In addition to the structuring of a WWW document based on the HTML document, another language plays a role in the formatting of the document. The layout of the HTML document is determined by the formatting language Cascading Style Sheets (CSS). There arethree options

  • To include CSS formatting in HTML documents:Inline style : Formatting directly in onestyle attribute
  • establish Formats in one placestyle element
  • establish Include a.

external file

The integration of an external CSS file is preferable and is recommended for large applications. An external CSS file is created that contains all formatting information. A CSS file is inCSS syntax written. For each formatting specification, aRule set

  • which has two components: one or moreSelectors
  • that e.g. select an element oneDeclaration area , which is put in curly brackets. The formatting declarations are in the declaration area and are separated by a semicolon. ADeclaration is a property-value pair

: the specified property is assigned the specified value.

An example rule set for changing the font and size of an entire document is

A more detailed description of this formatting can be found in the example CSS code.

Extended HTML document and CSS file using the mywebsite example from the service company

In this section we use the index.html file from the directory mywebsite / step3a /, this file contains a link to the University of Kaiserslautern. The CSS file main.css from the directory mywebsite / step3a / css specifies the layout of the HTML document.

HTML file

Explanation

The content has been expanded to include a new heading (h2 element, line 18), the new section contains a link that is integrated with the a element (line 20). The linked page is specified with the href attribute, which is opened in a new tab with the property-value pair target = "new". The text that is enclosed in the a-element start and end tag represents the link (here the text: "Here").

The external CSS file main.css is included in line 6 of the HTML document. A second possibility to include CSS formatting in the HTML document is implemented with the inline style in line 13, through the style attribute of the h2 element, the font color, only this heading, is set to slateblue if it is activated by commenting out , see tab "Display in web browser, 2". The h2 element in line 10 follows the rules of the external CSS file, see tab "Display in web browser, 1".

The HTML document generates the following display in the web browser if line 10 in the index-html is used for the heading h2:

If line 13 with inline formatting is active instead of line 10, i.e. not commented out, the following output appears in the web browser:

CSS file: main.css

Code description

In line 1, the font and size of the entire HTML document are changed. All statements in the body element are subject to this rule, unless this has been explicitly changed by inline formatting of an element.

The font color of the p element is black and the headings (h2 element) red, if not explicitly overwritten by the style attribute as in line 13 of the above index.html file. The link (a element) is highlighted in bold with a medium, vertical alignment (line 4), and changes its standard color from blue to green when the mouse moves over it.

Responsive web design - media queries in the CSS stylesheet A special feature in the development of web applications is that the size and resolution of the displays on the various end devices (notebook, tablet, smartphone, television) can vary greatly. Especially since the spread of smartphones, professional web applications are equipped with a responsive web design, which means thatAdapt the layout of the web application to the respective end device

can. By using media queries in the CSS stylesheet, the responsive design, i.e. the mobile design, of the website is implemented in a simple and fast way and that with just a few lines in the CSS file.

What are media queries and what effect do these queries have on the layout? Media queries, i.e. media queries, adapt style information to the respective end device with the help of special media tags and breakpoints. A media query is made possible by the @ media tag

and consists of a media type and one or more expressions with media properties that are evaluated as true or false. If the result of the media query is true, the appropriate style sheets or style rules within the @media tag are applied. Permitted media types are e.g. all (all devices), screen (screen), handheld (mobile device), print (printer). Valid media properties used in this demo are, for example: min-height, max-height, min-width and max-width, which query the height and width of the output area. A media query can be opened ontwo types be used. Either you writea separate stylesheet for each end device and used theMedia query in the declaration of the style sheets to select the appropriate stylesheet, see example 1, or writea single stylesheet for all devices

, in which you insert style rules for the targeted devices, see example 2 and the CSS file of our company example.
Example 1: Media queries in the declaration of the style sheets
The style sheet main568.css contains style rules for devices with a maximum width of 568 pixels, and similarly main800.css contains style rules for devices with a maximum width of 800 pixels. When the website is loaded, all stylesheets are loaded onto the client device, but only the appropriate one is used for formatting. The third default stylesheet is used if none of the previous rules apply.

The following source code is located in the header of the corresponding html file.
Example 2: Media Queries in a single CSS file
The style rules between the curly braces are only executed if the media type and media properties match.
Lines 1-3: The media rule specifies that the font size is reduced by a factor of 0.8 for all devices and output surfaces a maximum of 568 pixels.
Lines 4-5: The media rule specifies that the font size is increased by a factor of 1.2 for all devices and output area a maximum of 800 pixels.
Line 7-8: The media rule specifies that the font size is increased by a factor of 1.2 and a black border is created for screens in full screen mode.

The following source code is in a single main.css file.

HTML document and CSS file with media queries

In this section we use the index.html file from the mywebsite / step3b / directory and the main.css CSS file from the mywebsite / step3b / css directory, which was expanded to include media queries to implement the responsive design. We create a responsive website that adapts to different output media. The HTML document should consist of two areas: a menu bar ("sidebar") and a content area for the main content of the website, and depending on the width of the display area, the two areas should be displayed next to each other or one below the other. This responsive behavior is achieved with the help of media queries in the CSS stylesheets main.css.

CSS file: main.css

  • The customized css file contains the media queries for responsive web design.
  • Lines 1-6: First, global style rules are defined for all devices.In particular, the default setting is that the sidebar and content area are displayed one below the other and with a width of 100% for all media.
  • Lines 7-13: If the width of the output area is at least 36em (this corresponds to 576 pixels), e.g. on a smartphone in landscape format, the two areas main (name for the content area) and sidebar (name for the menu bar) are displayed next to each other in a ratio of 60% to 40%.
  • Lines 13-19: If the width of the output area is at least 50em (this corresponds to 800 pixels), e.g. on a notebook, the two areas are displayed next to each other, in a ratio of 70% to 30%.

The font color of the headings (h1 element) is also set from blue to dark blue or green, and the font size is increased by a factor of 1.1 or 1.2.

HTML file

After the stylesheet has been included in the HTML file (line 7), the sidebar class is assigned to the div element that contains the left menu bar (line 11), while the main content of the website is placed in a div element that contains the Assigned CSS class main (line 16). There is nothing more to do in the HTML page, the main work of the mobile design happens in the CSS stylesheet.

Output in portrait and landscape format

The HTML document generates the following default display on the device in portrait format.

The HTML document creates the following display on the device in landscape format.

The HTML document creates the following display on the notebook in landscape format.

Step 4 - Adding interactive JavaScript elementsJavaScript is a scripting language that is used todynamic websites
to create. With the help of JavaScript you can program user interactions, change, reload or generate HTML content in order to expand the possibilities of HTML and CSS. This is particularly used when creating mobile websites.

  • Typical areas of application of JavaScript in the web browser are:
  • Data validation of form entries before transmission to the server
  • Display of dialog windows

Data exchange without the browser having to reload the page JavaScript files can only be executed in a browser in whichJavaScript enabled
is so that the code can be executed. Javascript code can be incorporated into an HTML pagetwo types

  • be included: either inline in