WORK LOG

DAY 1
October 15, 2019
_______________________________________________________________________

15.30 - 18.00
MUICT (Meeting room)
Supervisor: Mr. Atthapan Daramas

On the first day, Ms. Kamonwan walks us through the MUICT’s building and introduces
each room with the purpose of it. Furthermore, she recommended most of the people in the office
and the roles they have. We got to meet with the director and deputy director of the ICT faculty.
Then, Ms. Kamonwan introduced us to both supervisors, who were going to teach and advise for the
whole internship. After that, we went into the meeting room with Mr. Atthapan to talk about what we
would do for the whole internship and what we learn in ICT. So, we know that the major tracks of
ICT are computer science, database and intelligent systems, computer networks, software
engineering, electronic business systems, multimedia systems, management information systems,
and health information technology. Next, we start to cover the topics we are going to cover with Mr.
Atthapan, including HTML, CSS, JavaScript, MySQL, PHP, and AJAX, which will contribute to a
web application. Our project with Mr. Atthapan, or the major of this internship, was to create a web
application. The original web or website is an overall data that is handed to users in a static form
meaning that it provides visual and text content that users can view and read, but not affect if
functioning. However, the web application is an interactive website where the user can manipulate
the restricted data and not only read the page content, for example, online banking. The web
application breaks into two parts, frontend, and backend. The frontend part is where all things that
the user interacts with appear, or the page render. Basically, it is where the images, contents, and
structures show, so the frontend builds how a website looks. This part used HTML, CSS, and
JavaScript to code. After we covered all the basic parts of the web application, the supervisor told us
to create a web application for the Emergency Room. Moreover, this web application needs to be
able to work on all different devices, including a tablet, a laptop, and a mobile. This web application
will be used for collecting a timestamp, such as “Register to ER”, “EKG”, “SK in ER”, and “Leave
in ER”, of the patients in the hospital. In conclusion, on the first day of the internship, we learned
about the MUICT, and the project overviewed.
WORK LOG
WORK LOG

DAY 2
October 16, 2019
_____________________________________________________________________________

15.30 - 18.00
MUICT (Meeting room)
Supervisor: Mr. Atthapan Daramas

On the second day, they provide us with laptops for me and Jedi to work on the project or the

web application. We started to make a web application by starting to code and the first computer

language we learned was HTML. Hypertext Markup Language or HTML is a markup language for

creating web pages, which consists of many markups tags. It is used to instruct the web browser how

to display the contents. The tool that we used to code was “Notepad++”. Then, Mr. Atthapan said

that before we started to code we need to start the services first. In order to start the services, we need

to open the docker, which is used to host all the services that are needed for the web application,

including the PHP, database or MySQL, and Nginx for load balancing, which is used for handling

lots of requests. Mr. Atthapan taught us that before you coded, you should sketch out how you would

like your web application to look, and then label what HTML tags each part in the web application

needed. This is how we think in algorithms, which is an important skill in the area of computer

science. Next, after we finished sketching and labeling everything, we moved on to the coding part in

the “NotePad++”. First, we break the coding part into two different places, which is the head and the

body. Then, we used most of the HTML tags to code inside the body to instruct the web browser,

which we sketched out to have four pages, to display most of the contents we needed. After we

finished the coding, the web pages will display all the information but in a disorganized way, so all

the contents will list out in one column. Eventually, today we learned about the HTML and started to

code the web application by using different HTML tags to display and instruct the body of the web

browser to display the contents in the way we wanted.

WORK LOG
WORK LOG

DAY 3
October 17, 2019
_____________________________________________________________________________

15.30 - 18.00
MUICT (Meeting room)
Supervisor: Mr. Atthapan Daramas

On the third day, Mr. Atthanpan taught us about “CSS” or also known as Cascading Style

Sheets. So, HTML is a way to create a layout and display the content of the web pages, then CSS is a

way to style it. Cascading Style Sheets allows us to specify the presentation of the pages, and it can

break into three types, which are known as CSS Types. The three types of CSS are inline, internal,

and external. These three types are a way to code the CSS in different places. For the inline, it is to

specify the style or CSS in the element. For the internal, the styles are placed in the “.html” file and

the external, the styles are placed separately from the coding part, or we called it from the outside,

such as the using the bootstrap. Mr. Atthapana suggested we use the bootstrap to style and organize

the web browser. Bootstrap is an open-sourced or free CSS framework, which is very popular

because it is responsive and mobile-first. In order to use the bootstrap, we just include files that we

had downloaded from the internet inside the body part, which mostly already define most of the

styles needed for the web pages. As usual, before we started to use CSS to decorate the web browser,

we needed to sketch out each web pageS and organize different parts by using the table. Next, we

labeled the CSS needed to use on each part after we finished, then we started to code. The examples

of Bootstrap used in this web application were putting in color to the web browser, and make specify

column width responsively, so it is able to adapt to any devices. To sum up, today we continue

working on the web application by starting to decorate and style the web browser using CSS, so each

web page has color and is organized in different columns and rows, and the width and column of the

web browser are able to adapt to any device.

WORK LOG
WORK LOG

DAY 4
October 18, 2019
_____________________________________________________________________________

15.30 - 18.00
MUICT (Meeting room)
Supervisor: Mr. Atthapan Daramas

On the fourth day, we continue to work on the web application to make it more interactive.

Mr. Atthanpan taught us about JavaScript, which is a lightweight scripting language that is used to

add interactivity to HTML pages. It runs at the client-side and is usually embedded in HTML pages,

so we code the JavaScript inside “Notepad++” the same as the HTML. Next, we learned about where

and how to put the JavaScript, and what JavaScript can do. We can put the JavaScript in two

different places, the first place is in the “<head>” tag, which will cause the JavaScript to load when

the page is loaded. The second place is the “<body>” tag, which will cause the JavaScript to load

after the page is loaded. We needed JavaScript to put dynamic text to the pages, cause the web

browser to react to the event, read and write HTML elements, and validate the data. Before coding,

we created a flowchart on the board, in order to code easily, the connections between the pages are

easier to understand, and create fewer mistakes. To put it briefly, today we created a dynamic text to

the pages and make the web browser react to the users, for example, able to mark the time of the

patients, causing the web pages to connect to each other and there was a current time or a clock

shown in the web pages.

WORK LOG