Concept of Client Server & Internet Application

Concept of Client Server & Internet Application

14/03/2016

On these day lecturer teach us about CSS&SSS and Internet Application. The relationship between client and server is the fundamental paradigm that determines the characteristics of computer languages on the web.

• Client & Server

Clients and Servers cooperate to deliver network services

- Client : initiates communication

-Server : send information's back to client

The differences between Client & Server are played out in terms of:

1. How the languages are invoked

2. What resources and information they can access

3. What Structures can be manipulated

4. How they interact with the user and system

5. The speed and predictability of their interactions

• 2 parts of scripting languages

- Client-side Scripts (css) for browser

- Server-side scripts (sss) for server (internet)

• Internet Application

Architecture for internet application

An Application Consist of three main parts :

- Form

  Seen on the browser and need to be filled by the user

- Process

  Invisible to the users to compute all transactions and it's an interface between user and the database which need scripts to generate the outputs

- Database

  All data management/manipulation done using the forms provided and not intended to view by the users

Basic HTML : Form

HTML

7 & 10 of March

Basic HTML : Form

Lecture teach us how to make form by using HTML. HTML form is used to collect user input.

• The <form> element defines an HTML form

<form>
.
form elements
.
</form>

HTML forms contain form elements.

Form elements are different types of input elements checkboxes, radio buttons, submit buttons, text box, password box and more.

• Text Box

<input type="text"> defines a one-line input field for text input:

Example :

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

output

• Radio Button

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

output

• Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

output

• Password Box

Password field, the computer will display a bullet or asterisk.

Example

<form action="action_page.php">

My Password<input type="password" name="pwd" size=15 maxlength=15>

  
</form>

outcome

• Check Box

Allow Users to select more than one option. It specifies that an <input> element should be pre-selected (checked) when the page loads.

The checked attribute can be used with <input type="checkbox"> and <input type="radio">.

Example

<form action="demo_form.asp">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

output

• Select

Create a pop-up list from which any one option may be selected. The form attribute specifies one or more forms the drop-down list belongs to.

Example

<form>


<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</form>

output

• Text Area

The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

Example

<textarea rows="4" cols="50">
Welcome to zhaffari blog
</textarea>

output

• Hidden Input

Allows an input which is hidden from the user. This inpt type used for special purposes.

Example

<input type="hidden" name="sendTo" value="adm@uum.edu.my">
The output will not shown to the user


This is an example of form using HTML that I've made in the lab.

ouput

Code

thank you have a nice day

2nd Lab : Basic HTML

2nd Lab : Adding Table in HTML

03/02/2016

Lab class of www programming class, lecture teach us how to add more rows or columns in HTML. From the lab 1 HTML page I've added new table and hyperlink for "experience" and "hobby"page.

Lab 1 page

I"ve changed the colour, the banner and add the menu tab by increasing the number of table to be like this below.

Current page (Lab 2 page)

as you can see now I've added 2 more tabs in main page, you can see the html coding.

before

I add 2 more table by inserting html codes below.

The important things that you have to put attention on the size of your table. make sure the size is the same or suitable for you to add. Write <a href=""> code to put hyperlink function on the text and you have to make 2 more pages of "experience" & "hobby" HTML document format in one folder.

there's another way to add up your table column by go to design view and you can right clik on the width number of table on the bottom of your design. After you click, will show a menu then you click add column. as you can see in this picture below

sometime the table size changing, so you have to adjust or undo the coding until the design works and looks right.

thank you have a nice day

Basic HTML

HTML

 29/02/2016

We're talking about HTML. HTML stands for Hyper Text Markup Language.
HTML is markup language for describing a web, the main language of WWW. An HTML file is a text file that containing small markup tags.

HTML tags

HTML can created by using simple text editor such as notepad. HTML documents have two part, head part and body part.

You can see the example on lab 1 post or you can see these basic tutorial video here.

1st Lab "Basic HTML"

25/02/2016

first lab session, lecture give us a file that contain html pages then let us to explore and edit the html pages.


 

Before

After

I edited the html page by using Adobe Dreamweaver. Changed the header, the colour background, add marquee.
Tips from the lecture is make sure your picture size is fit, so it won't change strecth the table/page.
You can see the html code below

thank you have a nice day