Week 9:Build webpage (Client) using page Breeze HTML editor

Objective:

Create security client access page using existing template

Content / Procedure:

• Page heading - i-hostel system

• Insert Form in page

• Add text box on the form

• Add submit button on the form

Result and Analysis:

The security client access page being create for security purpose. Beside the server,warden are able to access the system any other computer which is connected to the network. The warden provided with token that generated the IP for them to key-in in the security client access page. Once the IP recognize by system then warden can explore same as well with the serrver interfaces. To create the page, use the existing template then insert form before adding the text box and the submit button. After insert the form, add the text box and declare the text box as ipno in field properties The text box must have enough space to type ip address as per function.Then,add the submit button beside the text box location. In the field properties put field name as btnSubmit for declare the button use in this page. After finish all the the process, go to preview tab at page breeze to see the actual outcome the whole page.  

Conclusions: 

As conclusion, the most important thing to focus on the text box and submit button field name or declaration. The page might not ab;e to link to server or system if wrong declare or there have conflict between the name of declare. The System or server only recognize ipno and btnSubmit  on the page that created.

Week 8: Build student webpage using page Breeze HTML editor

Objective:

• Create student registration page for administration using existing template

• Create complaint accreditation form page using existing template

Content / Procedure:

• Insert form to template

• Add the drop-down list for block

• Add the drop-down list for floor

• Add the drop-down list for room

• Add the button for submit button

Result and Analysis:

For student registration page, it only can be access by administrator to register student particular in the system. Registration process focusing more to hostel room registration So in order to manage the data in the system, the user must select 3 different unique item including the block, floor and the number of room. Each room only can occupied maximum 2 people/student and if the same room register for the next student, the system will automatically reject the registration. This element created to to protect mistake during assign the student. To build the page, 3 drop-down list added to the form first for block declare as blok, second for floor declare as floor and lastly room declare as room.Submit button also being added to the form. All the field name must be different each other to avoid conflict during the programming. When admin push the submit button all the room detail will be store to the database.For complaint accreditation form,basically it same with student registration page.Only phone number registered blank and the complaint text space make it differ to the student registration. Phone number register blank use the text box field type declareas phone then the complaint text space use text area(multi-line) declare as aduan.The complaint will be fill up by student, the system require student to fill the phone number, room number and the complaint they want. The system will receive the complaint if the number and room number match with the database. If not the system will not process the complaint.

Figure1: Student Registration Page for administration access

Figure 2: Block Drop-downlist

Figure 3: Floor Drop-downlist

Figure 4: Room Drop-Downlist

Figure 5: Summit Button

Week 7: Build webpage using page Breeze HTML editor

OBJECTIVE:

• Create page student access in the page form using template

• Create page administrator access in the page form template

Content / Procedure:

• Open exiting page template 

• Edit heading : i-hostel system

• Edit title : Student Access

• Edit Sub-title :Please key the correct ID and Password

• Insert form field

• Add text box in the form

• Add password in the form

• Add submit button as login button in the form

• Add reset button as cancel button in the form

Result and Analysis:

Basically, template been use back in next pages to make a consistent format of the pages. With the template, some additional component field able to add easily and in term of time to build the pages, it become short. For this page, 1 form added in the template to process the data entered by web user and will send the result each submission. Then, insert field type of the text box in the form and set field name as namap for declaration. Text box is function as a input box in the web. Afterward, insert field type of password in the form, it is the input space for user to type their password. For this password field type, use a word kelasp as declaration. Some modification must be making onto submit and reset button created once form be inserted. For Submit button change the button label as Login and declare as BtnSubmit. Meanwhile, for the reset button, put the button label as a Cancel and declare as BtnClear .It nessary to put reminder againt web to remind and guide web user to key- in the correct Log in ID and the password to proceed the next pages when they get through the web or system. All the declaration like namap,klasp, BtnSubmit and Btnclear Important to programming in Visual basic. All the data capture from user will be process by identify the declaration. Then the process continue with Visual Basic will read or re-write the database.

Conclusions:

Each of the field type must be declare or put field name for programming process. It is important to declare to make sure all the user data can be store in database.

Figure 1: Web page of Student Access

Figure 2: Log ID

Figure 3: Password

Figure 4: Log-in Button

Figure 5: Clear Button

Week 6: Create main webpage using page Breeze HTML editor

Objective:

Build main webpage with 2 different user access


Content / Procedure:

• Insert Logo UniKL
• Write the Title : Welcome to i - Hostel System
• Hyperlink : Create button for Administrator and Student

Result and Analysis:

There is several software that can be used to develop HTML web such as by using Microsoft FrontPage, Notepad and few other free HTML editor. In this project,Page Breeze been chosen as a software to built the HTML web page. Page Breeze's design emphasizes simplicity and ease of use. Besides that help to create great looking Web sites almost instantly with virtually no learning curve. Page Breeze's visual editor is actually powered by Microsoft internet Explorer, so it can always be certain seeing exactly what will get when your web site is uploaded to server.This Page Breeze includes a drag and drop form builder which makes it easy to build powerful Web forms and get them working almost instantly,without the need for programming or scripts. We can switch between HTML source and visual modes at any time with a click of the mouse.In this i- Hostel System there are 3 web pages (HTML) to be developed. This is the step taken to build the main webpage for i- Hostel System.First step create a page and name it as index . In order to put logo in webpage, just click insert/edit graphic button then browse and select unikl logo as needed. Next step, put a heading "Welcome to i- Hostel" then create a title as "System Access" then, put "welcome to i-hostel system. please login" as subtitile .In the HTML page, insert 2 hyperlink to dedicate different user access, first link "Login as administrator" and the second link "Login as student". These 2 hyperlink should be able linkup to the other pages which is Administrator login page and Student login page that will explain more next week. 

Conclusion:

As conclusion, in this week completed to build the HTML main webpage by using Page Breeze software. Page breeze give a optional to create using visual HTML editor to build and edit pages easily compared by using Notepad which only use coding or script to build the HTML page.

Figure: Main page for i- Hostel System

Video: Page Breeze