Week 14: UniKL Engineer's Day 1/2012 24 April 2012

What would life be like without engineers?

“Without engineers, we humans would be naked and sitting 

in the dirt!”

 “Engineering is too important to be restricted only to 

engineers.”  Given the extent to which modern society is 

dependent on all manner of technologies, it is crucial that 

government officials, politicians, businessmen, school 

teachers and the public at large are given a big dose of 

engineering literacy.

“Instead of emphasizing the salaries that our students can 

make, we need to emphasize what students will be able to 

do,” Fortenberry said.

Thank an Engineer: Fun video that spoofs what the world would be like with wireless. Texas Instruments sends a shout out to today's engineers, thanking them for their ingenuity and passion. 

Week 13:Page breeze link with visual basic created.

Objective:
To show how the webpage link with visual basic

Content / Procedure:

• List out the webpage component declaration
• Visual basic programming base on declaration made
• Identify the sequence of the programming in this system.

Result and Analysis:
Previous week, the explanation regarding the way of create the webpage using the page breeze was explane. In the explanation, there had touch the declaration every component in every single web page created. Now, time to explain the method in order to make the web page working together with the interface created using visual basic. First, identify the declaration in the web page then list out to make it easy to program in visual basic. For example, administration access web page(pelajar), there have log in and password. Log in declare as namapr and password declare as  kelaspr. So, in the visual basic the programming as below :

Dim namapr As String, kelaspr As String
Pos = InStr(1, postedData, "namapr=") + 6
namapr = Mid(postedData, Pos + 1, Len(postedData) - Pos)
namapr = Mid(namapr, 1, Pos - 1)
namapr = UnformatString(namapr)
Text1.Text = namapr
Pos = InStr(1, postedData, "&kelaspr=") + 8
kelaspr = Mid(postedData, Pos + 1, Len(postedData) - Pos)
Pos = InStr(1, kelaspr, "&")
kelaspr = Mid(kelaspr, 1, Pos - 1)
kelaspr = UnformatString(kelaspr)
Text2.Text = kelaspr
If namapr = Text5.Text And kelaspr = Text6.Text Then
sckServer(index).SendData FormatPage(GetFile(AddASlash(indexDir) + Text7.Text))
Else
sckServer(index).SendData FormatPage(GetFile(AddASlash(indexDir) + Text8.Text))
End If

Visual basic will 'receive' input from the webpage then VB will continue the process to get the output. For this program, VB will 'receive' input key-in by user. Input log-in and password will process by compare. If the log-in and password same with the existing record then the system will allow the admin to proceed the access.

Conclusions:
The input from the webpage will only process when VB recognize the unique identifier in the programming. Afterward, the visual basic will link to datase created to ensure the input key-in by user same with the data stored.

Week 12: Visual basic 6.0 link with Database created.

Objective:
Link visual basic with microsoft Access data base using ADODC

Content / Procedure:

• Link ADODC in visual basic 
• Browse the database in connection string
• Select the database path
• Complete

Result and Analysis:

In visual basic 6.0 user able to connect the database easily. One of the method is using the ADODC component . To create the ADODC component in the visual basic, drag the icon ADODC in the left pane of visual basic then rename it .Then rename it before go to ADODC properties in the right hand side in visual basic. In connection string, click browser button to select the database path or directory in the server.The database format is .mdb  file, whereby the database in format microsoft database. After link the database, the programming for add and save onto database mustbe made to ensure all the new detail can be create in the database and the detail can be save in database when the system dig up the detail from database. Also the Programming to ensure the system has capability to store the data in databasecreated. Below is the programming created in this system;

*** Text4.Text = "AT+CMGR" Then

aks1 = Mid(Text3.Text, 34, 12)

aks2 = Mid(Text3.Text, 50, 8)

aks3 = Mid(Text3.Text, 59, 8)

aks4 = Mid(Text3.Text, 73, 5)

aks5 = Mid(Text3.Text, 79, X)

Adodc1.Recordset.AddNew

Text5.Text = aks1

Text6.Text = aks2

Text7.Text = aks3

Text8.Text = aks4

Text11.Text = aks5

Text14.Text = Text8.Text

Text15.Text = Text7.Text

Adodc1.Recordset.Save

Conclusions:

Adodc is component to link the visual basic with the database. The programming will make it run to keep all the data or detail to store in the database created before.

Week 11: Build webpage using page Breeze HTML editor

Objective:
Create Notification or warning page

Content / Procedure:

• Create processing page 

• Create access denied page

• Create accepted page

Result and Analysis:

To create a system that using the webpage, it is really need to mediator to notify theuser what is the current status on this system or what is current activity on this system. So, the mediator page is quite imortant things that need to pay attention.So, the mediator page is quite imortant things that need to pay attention.Basically, mediator page only have a message on it to and using the existing template. In this step, only 3 mediator page really need in this system, first is processing page,denied page and accepted page. The processing page contained "processing...please wait" on page. Processing page  will pop up after security page before warden can access and explore the system. For access denied page it contained "Access denied" on page. It will pop up if student or admin access using wrong password. After few second webpage refresh and back to previous page. Accepted page contained with "Accepted!Thank for your complaint" on page and it will pop up after complaint accreditation form finished.

Conclusions:

All mediator page are created to keep user in this system get a feed back from the system It help user to understand what is current "situation" of the system. Mediator page can be define as in between page before the next page.

Mediator Page

1.Processing page

2. Access Denied page

3.Accepted page

Week 10: Create user-warden interface using Visual basic 6.0

Objective:

Design the form layout with coding for complaint interface.

Content / Procedure:

• Create interface in the form layout according the requirement
• Key-in the coding for the form layout
• Compile and start running to simulate

Result and Analysis:

This interface consist of 3 portion are indicator, system menu and hostel block. Indicator portion basically to give a lagendary of color in hostel block portion.The color base on the room status. Room with normal condition is white which is zero complaint received. Color yellow indicate room is under progress to process complaint received. Meanwhile red color is to indicate room status is received complaint and still not process. Next portion is system menu, which is to navigate to other sub menu . From system menu user or warden can logout/quit and go to menu sms setting to create or add new number for maintenance Lastly is hostel block portion that contained all block and room number. The block and room number has been arrange same with the actual to give correct information to user/warden. For example, normal condition is white color telling that room is no complaint and good conditon. If the room receive the complaint, room indicate red color. User/warden will notice this situation then will assign a maintenance to carry on work on it. When maintenace was assign, then user/warden need to acknowledge that particular room the automatically room will indicate yellow color. After finish work by maintenance once again user/warden need to acknowledge room to get normal condition. 

Conclusions:

As conclusion i can said that for this interface is monitor by an Admin(warden) to notify the complaint. From here also, warden would be  able to know current status every block and every room. Warden can take action effectively base on information give by this interface.

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

Tutorial VB 3: Understanding Dialogs and Menus

In this tutorial sharing about Menus and Dialogs. So, let start designing a simple
Notpad application. Please notice that this tutorial focuses only on the controls not the code.

Week 5: Create user-warden interface using Visual basic 6.0

Objective:
Design the form layout with coding for main menu interface

Content / Procedure:

• Create interface in the form layout according the requirement
• Key-in the coding for the form layout
• Compile and start running to simulate

Result and Analysis:

This interface is the main menu after log in the system. It give the warden as user get information summary for the system. Some the information such as total report, report sorted by different block, satus report and also the notification for new report. Function button at the bottom are linking button to next interface . Vb component   have been use  such as command button, frame and label. Command button use as link button to the next interfaces. For the frame, it use to create some interactive and meanwhile label use for notification and all the report statistic.

Conclusions:

For the conclusion, created a button that known as the main menu interface for monitoring overall of the system by Warden.

Week 4: Create user-warden interface using Visual basic 6.0

Objective:
Design the form layout with coding for complaint report interface.

Content / Procedure:

• Create interface in the form layout according the requirement
• Key-in the coding for the form layout
• Compile and start running to simulate

Result and Analysis:

Generally about the interface- this interface receiving the complaint from user. From this interface layout some information such as the room no got problem, status report, user phone number that make the report, user message deliver to the warden. In other hand warden able to assign the technician/ maintenance to make some work for the report. Warden can type the work order to the technician or may forward all the report that receive from user/student.

Coding for the interface :

Form_load( )

.Commport=2

.setting=115200,N,8,1

.Handshake=ComRTS

.RTSEnable=True

.Rthreshold=1

ImputMode=ComInputModeText

InputLen=300

Portopen=True

End with

Command_Click( )

MsComma1.output="AT"&VbCrLf

sleep 500

MSComma1.output="AT+CMGF=1"&VbCrLf

sleep 500

MSComm1.output="AT+CMGF="&Chr(34)&TextNumber.Text&Chr(34)&VbCrLf

sleep 1000

MSComm1.ouput=Textmessage.Text&Chr(26)

Sleep 2000

Conclusions:

As the conclusion stated that the Complaint report interface, it use for warden to monitor the report from user and assigning the technician to make work.

Tutorial VB 2: Understanding controls - buttons and textboxes

In this tutorial will show  how to develop a simple calculator application using VB.NET, and examine some controls, and their properties. These are the form, text box, and command button.

Part 1

Part 2

Part 3

Part 4

Part 5

Tutorial VB 1: Understanding the IDE

In this tutorial, understand a little bit about the IDE, and what does it provide, so later on it will be easier for us to work on applications.

Week 3: Create user-warden interface using Visual basic 6.0

Objective:

Design the form layout with coding for SMS setting interface

Content / Procedure:

• Create interface in the form layout according the requirement
• Key-in the coding for the form layout
• Compile and start running to simulate

Result and Analysis:

In order to create SMS setting, a few VB6.0 component been use such as command button, text and combo box. For this interface, generally is all about the technician information or data, from here warden able to take a look phone number of each technician that has been store in their database. Also this interface allows the warden to add new data maybe for new maintenance purpose and remove the data of maintenance if warden didn’t needed. The combo box component has been use for display all the dropdown list of the mainteinance name. From there the warden able to select the name desired. After all, once warden select the name, in the text component will show the phone number of maintenance. The number taken from the database storage after added the data in database. For the command button there have 2 functions, 1st to add new mai data and the 2nd to remove the technician data selected. For the command button 1 when user or warden selects the transformation to the other form of VB will happen. The command button 2 for remove function. Before user or warden remove technician data from the data base, user need to select at the combo box component as per required.

Conclusions:

The SMS setting interface for adding, checking and removing all the technician data.

Figure 1 : SMS setting layout for technician details

Figure 2 : Add details and remove details

Figure 3 : Complete Layout