Rasim Izhar Ali completed a 6-week internship at Systems Limited focusing on front-end and back-end web development. They created a static website called HUES Clicks that allows users to submit contact forms, and includes user login/signup panels. The site is dynamically loaded using PHP, stores form data in a database, and sends email confirmations. Ali gained experience with HTML, CSS, JavaScript, jQuery, AJAX, PHP and databases. They concluded the internship provided valuable lessons in technical web development skills and time management.

1. INTERNSHIP REPORT
Web applications with Front hand/Backend development
NAME: RASIM IZHAR ALI

2. PAGE 1
ACKNOWLEDGEMENT
I would like to thank HR department for giving me the opportunity to
do an internship within Systems Limited. This was quite a great
experience I can learn from. It helped me to explore my skills and
increased my interest in web development (Front hand/Backend).
Special thanks to UI/UX manager Sohail Ahmed for being so
accommodating and understanding. He supports me a lot and also
supports my field of interest in backend development. He encourages
me a lot and I am very gratefulto him.
The environment was excellent in this company and my colleagues of
One Load make me happyevery time.

3. PAGE 2
TABLE OF CONTENTS
i. Introduction
I. Context Of Internship
II. Technical Aspect
ii. Solutions
I. Resolving Client Issues
II. HUES Clicks
iii. Discussion
I. Overview
II. HTML
III. CSS(Stylesheet)
IV. Javascript & JQuery
V. PHP(Database.php)
iv. Website Screenshots
I. Header Containing Slider
II. Content Area
III. Footer
IV. Login Popup
V. Sign up Pop up
VI. Form Submission Failed
VII. Indicating User On Runtime
VIII. Form Submission Successful Pop up
IX. Checking it on Email
X. Checking it on Database
XI. Admin Panel
XII. User Signup Successful
XIII. User Panel
v. Conclusion

4. PAGE 3
INTRODUCTION
“Life is one big road with lots of signs. So when you riding through the
ruts, don’t complicate your mind. Don’t bury your thoughts; put your
vision to reality. Wake Up and Live! ” – Bob Marley
I am student at Hamdard University studying B.E Computer System
Engineering in 6th
Semester. Since I find myself more interested in the
area of web development, I was unhappy to be assigned in UI/UX
Department in Systems Limited because my interest was in backend
development. But thanks to Mr. Sohail Ahmed who appreciates my
interest and let me do my work as a backend developer.
This report is a description of my 6 week internship carried out in
Systems Limited. In the following chapter details of the activities of my
team are given. Afterwards, I explain my role and tasks as a trainee and
give specific technical details about my main tasks. Finally, a
conclusion is drawn from the experience.
CONTEXT OF INTERNSHIP:
I was assigned different tasks related to front hand development.
 Issues regarding the compatibility problems between IE , chrome
and different browsers. Web page was responsive but was margin
problems between browsers and the whole page disbalanced.
 Making short hyper links for IE9 for managing their pages.
 Making separate classes for different browsers in order to set
alignment.
 Upgrading the website positioning and adding multiple things as
required by clients.
 Also converting the PSD template to HTML and CSS code.

5. PAGE 4
 Making static and dynamic website named HUES Clicks in
which the user can interact with us by filling the Contact us
form and all the details of users will be maintain in my database,
also I will get email of user details with form number when the
user had filled its form with correct details and user will also get
notification by e-mail that he has successfully submitted the
form. Also there is a login panel for user and admin and signup
process for user. In login panel for admin we can see all the data
in the grid of our users (Name, Email ID, Subject, Message, and
Time of Submission Form). In User login panel User can update
their information’s, Upload its picture on runtime just similar as
face book.
TECHNICAL ASPECT:
For the completion of the tasks the following web languages and
scripts have been used: HTML for the construction of the layout, CSS
for the design of the layout, JavaScript and JQuery for dynamic
functioning and JSON for data storage. Ajax for the call to server side
php scripts so that our data may be returned as json encode on
runtime. PHP for transferring the data to database and fetching data
from database. Also using the SMTP protocol for transferring the mail.
All the work has been done in Sublime Text Editor and My SQL wamp
Server version 2.0 and Apacheand Phpmyadmin for database.

6. PAGE 5
SOLUTIONS
RESOLVING CLIENTS ISSUES:
During the first half of my internship first of all I was assigned to code
a PSD template into HTML, CSS. After completion of that my senior
assigned me the issues as post by the clients. Firstly I was assigned to
make a short hyperlink for PDO (Petroleum development Oman)
website. I put it live and it works well in chrome and Firefox but there
was an issue that animation in short links was not supports by IE9 so it
was said by my senior to create a short hyper links without and
animation which do supports chrome, Firefox as well as IE version 9 to
11. This issue was resolved by my senior as it was urgentlyrequired.
Secondly, I was assigned multi issues of positioning of text and images
in IE browser. Also there was one problem with div which was at
correct alignment in chrome and Firefox but when we open it in IE we
faced a problem so we made a separate div for IE and by writing a
script i.e.) JavaScript we detect the browser that it is IE or not so we
show and hide the div by detecting the browser.
Hues Clicks:
After half of the period has been spent during internship I start
moving towards making a web application so I starting working
on a static website then after I dynamically loads the page for
user’s panel through which the user can interact with us by
filling the Contact us form and all the details of users will be
maintain in my database, also I will get email of user details with
form number when the user had filled its form with correct
details and user will also get notification by e-mail that he has
successfully submitted the form. Also there is a login panel for
user and admin and signup process for user. In login panel for
admin we can see all the data in the grid of our users (Name,

7. PAGE 6
Email ID, Subject, Message, and Time of Submission Form). In
User login panel User can update their information’s, Upload its
picture on runtime just similar as face book.
DISCUSSION
OVERVIEW
The Hues Clicks had been planned to consist of two parts front-end
and back-end development. The front-end is the part of the web that
you can see and interact with (e.g. Client-side programming). While
front-end code interacts with the user in real time, the back-end
interacts with a server to return user ready results. The front-end is a
combination of HTML, CSS and JavaScript coding. By using JavaScript,
modifications of the design of a web page can be made immediately,
however only temporary and visible only by the user. Normally the
user would not have rights to modify web content dynamically on the
server side.
Logically, administrators are the ones who deal with back-end
modification of databases for example, as they often contain sensitive
data which should not be available to see or modify by the general
public. Back-end programming languages include PHP, Java, Python,
Ruby and others.
I focused on both front hand as well as back end development in order
to create a standalone application by myself. Difference between front
hand and back end development is shown in below figure.

8. PAGE 7
HTML
This is contact us page html coding and there are multiple
panels in HTML .
CSS

9. PAGE 8
JAVASCRIPT & JQUERY:
All functionality of the modules has been programmed in JavaScript,
including jQuery and AJAX. jQuery is a fast and small JavaScript
library that offers manycuseful features that make event handling
among other things much simpler with can easy-to-use API that works
across a multitude of browsers.
AJAX, though not another programming language or library is a way of
using existing standards. It is the art of exchanging data with a server
and updating parts of a web page, without the need to reload the
entire web page.
I used the jQuery.ajax() handler which performs an asynchronous
HTTP (ajax) request. The request is sent to the translation library (or
the json file) leading to the creation of a JSON object upon success.

10. PAGE 9
PHP:
This is the php script for which the ajax will call this php and it will
follow if condition if user is opening is being log in and will follow else
condition if the admin is going to log in. I also include a database.php
which contains all the functioning in php.
 DATABASE.PHP

11. PAGE 10
WEBSITE SCREENSHOTS
 Header Containing Slider
 Content Area
The red cross sign you can see is this because the user did not fill
it when it was submitting the form.

12. PAGE 11
 Footer
 Login Popup
 Sign-up Popup

13. PAGE 12
 Form SubmissionFailed
User when enter the wrong details and enter the submit the
following popup is displayed.
 Indicating User OnRuntime
That the details he entered is correct.

14. PAGE 13
 Form Submission SuccessfulPop Up:
 Checkingit on E-mail :
The details user entered will get me by e-mail and this email will
come only in the folder Hues Clicks.
 Checkingit On Database:
The user details I also got in my database with the time he
submitted.

15. PAGE 14
 Admin Panel
In admin panel page we do have different tabs in which one is
Contact Form List in which all the user messages etc is displayed
in a grid form.
On clicking this grid will be displayed as:
 UserSignup Successful
In this panel we will write details for user signup and that etails
will be stored in database as shown.

16. PAGE 15
 UserPanel
This is the user panel whoever has signed up and after login
screen this will display with its details.
After clicking Edit Profile user will update its profile and in
runtime it is done.

17. PAGE 16
After all when you see your profile then you will get the
following result as shown.
All the information is also at database so whenever the user will
be login he will get the last updated profile.
Now a user will upload its profile picture and then you can see.

18. PAGE 17
Even after refreshing or after login after sometime this picture
will be there.
CONCLUSION:
In a nutshell, this internship has been an excellent and rewarding
experience. I can conclude that there have been a lot I’ve learnt from
my work at the Systems Limited. Needless to say, the technical aspects
of the work I’ve done are not flawless and could be improved provided
enough time.
As someone with no prior experience in JavaScript, Jquery, PHP, AJAX,
CSS,HTML whatsoever I believe my time spent in research and
discovering new languages was well worth it and contributed to
finding an acceptable solution to an important aspect of web
development that includes both front hand and back end development.
Two main things that I’ve learned the importance of are time-
management skills and self-motivation. Although I have often
stumbled upon these problems at University, they had to be
approached differently in a working environment.

19. PAGE 18