Full Stack Development at Glostars Oy

Summer Internship Project Report Full Stack Development at Glostars Oy Submitted by Md Julhas Hossain Full Stack Developer Intern University of Liberal Arts Bangladesh Under the guidance of Md Anowarul Abedin Senior Lecturer Department of Computer Science and Engineering University of Liberal Arts Bangladesh 688 Beribadh Road, Mohammadpur, Dhaka, 1207, Bangladesh. Summer Internship 2017 Department of Computer Science and Engineering University of Liberal Arts Bangladesh Certificate of Approval The internship report entitled “Full Stack Development at Glostars Oy” is submitted to the Computer Science and Engineering, University of Liberal Arts Bangladesh, Dhaka in partial fulfillment of the requirements for the project course of Bachelor of Science. Name of the guide (Md Anowarul Abedin) Date: August 2017 Abstract This internship report focuses on my contribution towards Glostars Oy as an intern and achievements from this internship program. It provides detail on my activities at this company, technical and professional achievements what I have learnt from observing the other IT professionals. This report also provide the working process of Web development and Mobile development at Glostars Oy. The three-month internship program was carried out at Glostars Oy I was given the responsibility of learning, implementing and analyzing the results of Web development. This report explains my completed projects and ongoing activities in this company as an intern member of WEB team. The steps of software requirements analysis, software planning, implementation, testing phase and maintaining phase were followed and documented for every project. Finally, this report concludes with the achievements as an intern in terms of professionalism and attitude that highlights the values of the internship program. Recommendations for the prospective interns are also provided. Contents 1 Objective 1 2 Introduction 2 2.1 Background of the study . . . . . . . . . . . . . . . . . . . . . 2 2.1.1 Technology Stack . . . . . . . . . . . . . . . . . . . . . 3 2.2 Statement of Problem/Issue . . . . . . . . . . . . . . . . . . . 4 3 Company Profile 5 3.1 WhatGlostarsOffer ....................... 5 3.1.1 Mutual Follower Photo . . . . . . . . . . . . . . . . . . 5 3.1.2 PublicPhoto ....................... 6 3.1.3 Competition Photo . . . . . . . . . . . . . . . . . . . . 6 3.1.4 Different Things of Glostars . . . . . . . . . . . . . . . 6 3.1.5 Achievements of Glostars . . . . . . . . . . . . . . . . . 6 3.2 Services and Products . . . . . . . . . . . . . . . . . . . . . . 6 3.2.1 Services .......................... 7 3.2.2 Products.......................... 7 3.3 Departments............................ 8 4 Technologies 9 4.1 Hardware ............................. 9 4.1.1 Microsoft SQL server 2014 . . . . . . . . . . . . . . . . 9 4.1.2 IISServer ......................... 10 4.2 Software.............................. 12 4.3 Technology Explanation . . . . . . . . . . . . . . . . . . . . . 13 4.3.1 Microsoft visual studio 2013 . . . . . . . . . . . . . . . 14 4.3.2 Microsoft Visual Studio Code . . . . . . . . . . . . . . 14 4.3.3 Html5 ........................... 15 4.3.4 CSS ............................ 15 4.3.5 Javascript ......................... 16 4.3.6 Jquery........................... 16 i 4.3.7 Bootstrap ......................... 16 4.3.8 ReactJs .......................... 17 4.3.9 Some Features of ReactJs . . . . . . . . . . . . . . . . 17 5 Work Done 19 5.1 Project Background . . . . . . . . . . . . . . . . . . . . . . . . 19 5.2 ProjectDesign .......................... 20 5.2.1 System Overview . . . . . . . . . . . . . . . . . . . . . 20 5.2.2 Client Applications Layer . . . . . . . . . . . . . . . . 21 5.2.3 API Gateway and Load Balancer Layers . . . . . . . . 21 5.2.4 Backend Microservices Layer . . . . . . . . . . . . . . . 21 5.2.5 Data Storage and External Services Layers . . . . . . . 22 5.3 Environment Setup and Coding Style . . . . . . . . . . . . . . 22 6 Implementation 27 6.1 TheInterviewTask........................ 27 6.2 Task1............................... 29 6.2.1 Problem1......................... 29 6.2.2 Solution1......................... 29 6.3 Task2............................... 31 6.3.1 Problem1......................... 31 6.3.2 Solution1......................... 31 6.3.3 Problem2......................... 32 6.3.4 Solution2......................... 32 6.3.5 Problem3......................... 32 6.3.6 Solution3......................... 32 6.3.7 Problem4......................... 33 6.3.8 Solution4......................... 33 6.3.9 Problem5......................... 33 6.3.10Solution5......................... 33 6.3.11Problem6......................... 34 6.3.12Solution6......................... 34 6.4 Task3............................... 34 6.4.1 Problem1......................... 35 6.4.2 Solution1......................... 35 6.4.3 Problem2......................... 35 6.4.4 Solution2......................... 35 6.4.5 Problem3......................... 35 6.4.6 Solution3......................... 36 6.4.7 Problem4......................... 36 6.4.8 Solution4......................... 36 ii 6.4.9 Problem5......................... 37 6.4.10Solution5......................... 37 6.4.11Problem6......................... 37 6.4.12Solution6......................... 37 6.4.13Problem7......................... 37 6.4.14Solution7......................... 37 6.4.15Problem8......................... 38 6.4.16Solution8......................... 38 6.4.17Problem9......................... 38 6.4.18Solution9......................... 38 6.4.19Problem10 ........................ 40 6.4.20Solution10 ........................ 40 6.5 Task4............................... 40 6.5.1 Problem1......................... 40 6.5.2 Solution1......................... 41 6.5.3 Problem2......................... 41 6.5.4 Solution2......................... 41 6.5.5 Problem3......................... 42 6.5.6 Problem4......................... 42 6.5.7 Problem5......................... 42 6.5.8 Problem6......................... 42 6.5.9 Solution 3 4 5 6 . . . . . . . . . . . . . . . . . . . . . . 42 6.5.10Problem7......................... 43 6.5.11Solution7......................... 43 7 Conclusion and Recommendations 45 7.1 Conclusion............................. 45 7.2 Recommendations......................... 46 7.2.1 Recommendation to their services . . . . . . . . . . . . 46 7.2.2 Recommendation to software & hardware services . . . 46 7.2.3 Recommendation to other services . . . . . . . . . . . . 46 Acknowledgements 47 Declaration 48 References 49 iii Chapter 1 Objective The main objectives of the report is to familiarize with overall activities of the web development section of the Glostars Oy as well as its products, customers, standard practices and their success stories. To know about the challenges which are faced in the software industry, to evaluate and analyze the software development systems in Glostars, to get the real life experience in web development sector, to know about the coding conventions and style, to get the experience of the team working, to explain my job responsibility as an intern and narrate different lessons learnt while working as an intern at Glostars. My achievements as an intern, especially focusing my nonacademic and professional achievements, self assessments and company evaluation. 1 Chapter 2 Introduction 2.1 Background of the study I worked as an ASP.NET full stack developer intern in Glostars Oy Company. Glostars Oy is a software development Finnish company, having business and interest in Social Media software solutions in Finland. They have only one project just like Facebook. Their Main users are photographers[1]. Figure 2.1: Glostars Opening Page Though Glostars Oy works almost every platform of information technology, I got the chance of working with developer team. More specifically I did Web Features development there. During my internship I developed fontend development of their four page and also used the front-end framework for working the front-end side faster. I used the Reactjs technology for doing the work faster. All of my work was now publish as a live server into the glostars website Figure 2.1. This website is responsive for any screen size. Developing this web features I work with some Web platform languages 2 such as Asp.net Mvc, html, css, bootstrap, javascript, jquery, SignalR and c#. I use Asp.net Mvc and SignalR for creating the chatting application feature. For design or the front-end side I use html, css and javascript and the ReactJs library. I use font color, background color, font-size, font-family, margin, padding etc properties to CSS. I also use some dependencies which is add some features that I can use in my project. I use Dependencies which works with Asp.net MVC to enhance Object Relational Mapping using entity framework and make them more dynamic. I made glostars web apps full responsive that all of the screen resolution support it for this I used bootstrap. I used material design code with XML which verify the activity is looking perfect for users. I also involved with two other projects one is Chat in Room and another is Pocket Bank. I worked as a android developer in these projects. I tried to use all my coding skills what I have learned to make those apps best and get user satisfaction. I followed best coding practice and coding conventions within my knowledge. Into this Internship period as I already mentioned I am a Full stack developer at Glostars Oy. So their maximum website work task is given to me. When they give me there existing website for solving me. I found they have used so many technologies into their website. As a Background of the study I am going to describe those technologies into this section. 2.1.1 Technology Stack The Glostars website employs the following technology stack: AngularJS 1: Front-end JavaScript framework ASP.NET MVC: Server-side web framework ASP.NET WEB API: Framework for building HTTP services Bootstrap 3: Front-end framework for responsive design HTML, CSS, JavaScript: Core web development technologies jQuery: JavaScript library for DOM manipulation 3 SQL Server is a central part of the Microsoft data platform. SQL Server is an industry leader in operational database management systems (ODBMS) Figure 4.1. Figure 4.1: MS Sql server 2014 4.1.2 IIS Server Why IIS Server is need for Glostars website. Besically its so important for running the website into the Http protocol. Main thing is that this server opens the http port for connecting the website into the internet Figure 4.2. Internet Information Services (IIS, formerly Internet Information Server) is an extensible web server created by Microsoft for use with the Windows NT family. IIS supports HTTP, HTTP/2, HTTPS, FTP, FTPS, SMTP and NNTP. It has been an integral part of the Windows NT family since Windows NT 4.0, though it may be absent from some editions (e.g. Windows XP Home edition), and is not active by default[3]. There are so many versions of IIS server and it is updating day by day its features. •IIS 1.0 was initially released as a free add-on for Windows NT 3.51. •IIS 2.0 was included with Windows NT 4.0. •IIS 3.0, which was included with Service Pack 2 of Windows NT 4.0, introduced the Active Server Pages dynamic scripting environment. •IIS 4.0 was released as part of the ”Option Pack” for Windows NT 4.0. It introduced the new MMC-based administration application. 10 •IIS 5.0 shipped with Windows 2000 and introduced additional authentication methods, support for the WebDAV protocol, and enhancements to ASP. IIS 5.0 also dropped support for the Gopher protocol. •IIS 5.1 was shipped with Windows XP Professional, and was nearly identical to IIS 5.0 on Windows 2000. •IIS 6.0, included with Windows Server 2003 and Windows XP Professional x64 Edition, added support for IPv6 and included a new worker process model that increased security as well as reliability. •IIS 7.0 was a complete redesign and rewrite of IIS, and was shipped with Windows Vista and Windows Server 2008. IIS 7.0 included a new modular design that allowed for a reduced attack surface and increased performance. It also introduced a hierarchical configuration system allowing for simpler site deploys, a new Windows Forms-based management application, new command-line management options and increased support for the .NET Framework. IIS 7.0 on Vista does not limit the number of allowed connections as IIS on XP did, but limits concurrent requests to 10 (Windows Vista Ultimate, Business, and Enterprise Editions) or 3 (Vista Home Premium). Additional requests are queued, which hampers performance, but they are not rejected as with XP[4]. •IIS 7.5 was included in Windows 7(but it must be turned on in the side panel of Programs and Features) and Windows Server 2008 R2. IIS 7.5 improved WebDAV and FTP modules as well as command-line administration in PowerShell. It also introduced TLS 1.1 and TLS 1.2 support and the Best Practices Analyzer tool and process isolation for application pools. •IIS 8.0 is only available in Windows Server 2012 and Windows 8. IIS 8.0 includes SNI (binding SSL to hostnames rather than IP addresses), Application Initialization, centralized SSL certificate support, and multicore scaling on NUMA hardware, among other new features. •IIS 8.5 is included in Windows Server 2012 R2 and Windows 8.1. This version includes Idle worker-Process page-out, Dynamic Site Activation, Enhanced Logging, ETW logging, and Automatic Certificate Rebind. •IIS 10 is included in Windows Server 2016 and Windows 10. This version includes support for HTTP/2. 11 Figure 4.2: ISS server used by Glostars 4.2 Software This software section is one of the most important section for any IT Company or Software technology. Because there are so many technology and software which is used for making this application. Glostars Oy also have their technology which they using for making their website, mobile app, and IOS app. I am going to describe all of this technology which brief details into this section. For Web App Technologies: glostars used some software and IDE for development purpose. visual studio was used for coding backend of software and the visual studio code was used for frontend development because it was lightweight. Software or IDE: •Microsoft Visual Studio 2013. •Microsoft Visual Studio Code. Programming Languages: it is one of the core part for developing the software. different programming language is used for various purpose. in this case mostly JavaScript programming language is used for frontend development and c# programming language is used for backend development. Front-End Side: glostars used the html5 and Css for page design javascript and jquery for functional effect on the website, bootstrap for page responsiveness and Reactjs for state management. •Html5 •Css 12 •Javascript •Jquery •Bootstrap •ReactJs Back-End Side: they used the model view controller framework in the backend side with Asp.net technologies. Most of the code was written in c# code. •Asp.net mvc 4.5 •Asp.net webapi •SignalR •LinQ •Entity Framework •Code First Migration •C# For Mobile App or Android App technologies: Android Studio •Java •React-native •XML IOS App Technologies: •Swift •Objective-c 4.3 Technology Explanation Into the website they used programming languages, Frameworks, Design components language and many more. So I am going to describe all of this technology one by one. 13 4.3.1 Microsoft visual studio 2013 Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft (Figure 4.3). It is used to develop computer programs, as well as web sites, web apps, web services and mobile apps[5]. Figure 4.3: MS visual studio 2013 4.3.2 Microsoft Visual Studio Code Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS (Figure 4.4). It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring[6]. Figure 4.4: Visual Studio Code IDE 14 4.3.3 Html5 HTML5 is a markup language used for structuring and presenting content on the World Wide Web(Figure 4.5). It is the fifth and current major version of the HTML standard[7]. Figure 4.5: HTML5 Code snippet 4.3.4 CSS Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language[8]. (Figure 4.6) showing us the attribute section of CSS. Figure 4.6: CSS Code declaration 15 4.3.5 Javascript JavaScript, often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language[9]. (Figure 4.7) showing us the code snippet of JavaScript. Figure 4.7: Javascript code snippet 4.3.6 Jquery jQuery is a cross-platform JavaScript library designed to simplify the clientside scripting of HTML. It is free, open-source software using the permissive MIT License[10].(Figure 4.8) showing us the code snippet of Jquery. Figure 4.8: Jquery code snippet 4.3.7 Bootstrap Bootstrap is a free and open-source front-end web framework for designing websites and web applications[11].(Figure 4.9) showing us the code snippet of Bootstrap. 16 Figure 4.9: Bootstrap code snippet 4.3.8 ReactJs ReactJs is a Javascript library for building user interfaces. It is maintained by Facebook, Instagram developers and communities. React allows developers to create large web-applications that use data and can change over time without reloading the page. It aims primarily to provide speed, simplicity, and scalability[12]. 4.3.9 Some Features of ReactJs One way Data Flow : To use React to its greatest potential, Properties (or props), ideally a set of immutable values, are passed to a component’s render function. A component should not directly modify any properties passed to it, but should be passed callback functions that instead modifies the store creating a single source of truth. This mechanism’s promise is expressed as ”properties flow down; actions flow up”. The described mechanism is an architecture called Flux. Many Flux alternatives have been created since its inception however the community has moved toward Redux. Virtual Dom : Another notable feature is the use of a ”virtual Document Object Model”, or ”virtual DOM”. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render sub components that actually change[13]. JSX : React components are typically written in JSX, a JavaScript extension syntax allowing quoting of HTML and using HTML tag syntax to render sub-components. This is a React-specific grammar extension to JavaScript like the now-defunct E4X. HTML syntax is processed into JavaScript calls of the React framework. Developers may also write in pure JavaScript. JSX 17 is similar to another extension syntax created by Facebook for PHP, XHP. JSX looks like regular HTML. An example of JSX code: import React from ’react’; class App extends React.Component { render() { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> ); } } export default App; 18 Chapter 5 Work Done 5.1 Project Background As I already described that I am working as an intern in Glostars. In this company my role is that I am website developer of the Glostars. For developing their website I worked with the technology called Asp.net Mvc which is written with the C# programming Language. So in Chapter 2 the problem and Issue section I already describe how many problem they have into their website. As a result they mark the problems and then give me to fix all of that problems. So Into the internship period I have done so many works. I am going to describe all of this work into this working project section. At first I solve so many front-end work, re-design their website also change some technology they had not before into their website such as bootstrap3 to bootstrap4. Also they had responsiveness problem into their website. I solved At least 40 bugs of their website and every bugs give me a new knowledge. Each of every bugs gives me a new name of a development technology. When I talk with the Glostars company they also took a interview of me and also give me a task which called a login register system for their website and I successfully passed that task and then they hired me. I am going to describe all of this working projects into the implement section one by one. 19 Figure 5.7: Controller for Register Model Figure 5.8: View for the landing page 26 Chapter 6 Implementation This section is called implementation where I am going to describe the details work what I have done into the glostars and how I implement the logic and design into their website. As I already mentioned into the project background section now I am going to describe all of the things below: 6.1 The Interview Task They give me a website page which is created by using only HTML, CSS. My task was that I need to convert this design to the ASP.Net design and then connect it to the backend server. There existing project is created with using the technology which is ASP.NET MVC, AngularJS, SignalR, ASP.NET web APi. But for the task I need to know how the asp.net website work and the MVC pattern. And the visual studio IDE tools. Into the design there is some functionality I need to work for. Figure 6.1: upper part of the landing page 27 Figure 6.2: middle part of the landing page Figure 6.3: lower part of the landing page This is the total full page they give me. The task is simple I need to register a user by clicking the signup button fill up the registration form and then Login in that user to the website. For doing this task at first I made a project in visual studio and then select the MVC project. Here MVC is a design pattern. It is a most famous design pattern which is used for software development nowadays (Figure 6.1 6.2 6.3). MVC: It means (modelview –controller) this three different portion has different work. Model makes the class for the filed we want to store into the database. Then controller which controls the Model and View portion. Controllers main work is to connect the Model and View using the help of data base. For my task I follow the pattern I made a RegisterViewModel class into the model folder for user registration. Then made a AccountController class into the controller folder also a view which is into the view folder that file is 28 called landingpage. It is a html file. I am working at Asp.net so I need to convert this html to the cshtml. 6.2 Task 1 6.2.1 Problem 1 First work is that I need to re-design their website. They have some UI design but which is developed using only html css and javascript. My work is that I want to use that design and then implement it to their existing website. So at first I need to convert full design into the Asp design which is called cshtml. I am going to share some screen shots of my work what I need to do and also numbering the work they need from me as a first work. •I have to change the whole landing page of their website. •I need to change the navigation bar of their full website. •Change the notification button icon •After changing the design I have to connect all of them with Asp.net MVC and backend server. •Change the navigation or menu bar after login all page and before login all pages. So I start to solve one by one requirement. I already showed the landing page picture. So I need to implement the landing page replacing their existing landing page. So the landing page design code they give me. but it was made with bootstrap 4 version . But their website already used bootstrap3 version so there is a confliction between this two version. That was a huge problem and it takes about a week to solve this problem. 6.2.2 Solution 1 For solving this problem I made the design with bootstrap 3 again. Because they give me the version of bootstrap 4 design which will not support into their website. So I took the responsibilities and made the design into bootstrap version 3 for solving this confliction problem. They also give me a code of navigation bar but that was not worked because that was also made in bootstrap version 4 . so for the work I need to code it into bootstrap version 29 Figure 6.4: Before login navigation bar pic Figure 6.5: After login navigation bar pic 3. Here is the navigation bar picture which I code and designed in bootstrap version 3 given in (Figure 6.4 6.5) This two navigation bar I re-designed in bootstrap 3 for matching our version and remove the conflicting between bootstrap 3 and 4. After our design part is ready then I converted it into asp design for connecting with backend. Here I use the design pattern MVC . I created a view and layout.cshtml file for adding those design and then merge them with their existing website. I read all of the code of their existing project find out those lines which is written for that navigation bars. So I replace the code of landing page and this two navigation bars for all of the page of the website and placed them correctly. Here is the sample code for the navigation bar given below I collect this photo from my project work (Figure 6.6). Figure 6.6: Navigation bar code sample In this way I solved all the requirement of my First work and also delivery the all of the work in time to our Glostars company CEO. Basically he maintain the whole developers work of all employees. After finishing my first work they give me more requirements for fix that problem that means they give me the bugs for solving it. I used debugging tools for solving that all 30 bugs (Figure 6.7). Debugging Tools •I used visual studio debugging tools for testing c# code. •For the Frontend debugging I used Google chrome Inspect Element that will help us for find out the problem and also solving the problem by using it. Figure 6.7: Google chrome Inspect debug Tools 6.3 Task 2 When I have done their website work there was some bugs out there. So they find out those bugs and give me those bugs for solving it. 6.3.1 Problem 1 When a user try to register the register form should be validate that time. 6.3.2 Solution 1 For handling validation Register page which is popup when we click into the Signup button. We can validate a form in many ways such as “html required” validation or “Validation in Model Class”. I used Html Required validation for doing the task. Here is the screen shot when I fix that bug (Figure 6.8). 31 Figure 6.8: Validation of register form 6.3.3 Problem 2 Change the Background picture of the landing page. 6.3.4 Solution 2 For changing the background picture I am just replace the picture with the new picture into the code and successfully done this requirement. 6.3.5 Problem 3 Change the content of the landing page. 6.3.6 Solution 3 Into Some html tag I changed the content for the landing page website. The content basically they give me for their website (Figure 6.9). Figure 6.9: Content of the landing page photo 32 6.3.7 Problem 4 Change the About, FAQ, Contact Us, Media Page Navigation Bar. 6.3.8 Solution 4 For Changing About, FAQ, Contact Us, Media page navigation bar I made a different layout page into the view folder which will common in all of this four page and then call that layout page to the other html page. In this way I solved the problem of all this pages navigation bar. Here is the difference we can find out if we see these two picture where I showed the before bug on the page and after solving the bug of that four pages (Figure 6.10 6.11). Figure 6.10: Before solving bug 6.3.9 Problem 5 Change the color of signup button from red to green color. 6.3.10 Solution 5 Changing the color of the signup button from red to green I only change the css file code where the color is given for that button is red. I just replace it with Green. In this way button color changed into green. 33 Figure 6.11: After solving bug 6.3.11 Problem 6 Into the Signup popup terms of use button not working. 6.3.12 Solution 6 For solving this requirement I need to learn the bootstrap 3 modal. Which is basically used for popup effect into the website. So I learned the popup effect into bootstrap 3. Then I liked that popup which the button terms of use into the signup form and successfully It’s working. 6.4 Task 3 After solving all of the problem they give me more bugs which is more challenging tasks for me. They give the task of changing some design of their website. And the requirements they want to solve which is given below. 34 6.4.1 Problem 1 Into the Landing Page there is a problem in navigation bar which is, it so close in left side and it should be more on right side. 6.4.2 Solution 1 Basically there is a html tag called “ul” that means unordered list. And that portion is given so much margin into the left side in the css file. So I just minimize the margin size from the css code and solve the problem so easily (Figure 6.12). Figure 6.12: Navigation Bar 6.4.3 Problem 2 After Login navigation bar have two things which is Search bar and Upload button it should be more left side. 6.4.4 Solution 2 At first when I implement the new design to the glostars website the problem is occurred at that time. After log into the glostars website the navigation bar there is a search and upload button. But it is more right side. This problem is like as number 1 problem. By the same way I solved that problem. Just changed the css code from the css file which is ”margin-right : -22px;” (Figure 6.13). Figure 6.13: Search & Upload Button 6.4.5 Problem 3 After responsive the navigation bar name should be on beside of the profile pic into the nav bar. 35 Figure 6.21: Time zone issue 6.5.5 Problem 3 In the Url Home/glostarsphoto navigation bar is not changed. 6.5.6 Problem 4 Into the Url Home/Prizes page change two section one is Sep-Dec 2017 and another section should be written in Updated on Oct 2017 6.5.7 Problem 5 Into the Url Home/Notifications there navigation bar should be changed. 6.5.8 Problem 6 When clicking any hashtag there navigation bar is old. Also the same problem in search result page. 6.5.9 Solution 3 4 5 6 All of this bugs have same problem. All of this pages do not have the layout of new navigation bar. So I selected them individually and then replace the 42 Figure 6.22: See all people issue solve old layout html file with the new layout file. So after changing layout file all the pages have new navigation bar(Figure 6.23 6.24). Figure 6.23: Navigation old layout Figure 6.24: Navigation new layout Changes happened into the notification page navigation bar (Figure 6.25 6.26). Changes into the glostars photo page which is the navigation bar before it was look like pink color and new design it look like violet color and some functionalities changed (Figure 6.27 6.28). 6.5.10 Problem 7 Need to change the star color from pink to violet. 6.5.11 Solution 7 When anyone upload a photo other user can rating that photo by giving them star. It is just like face book like system. But my work is that I need 43 Figure 6.25: Before the notification page Figure 6.26: Before the notification page Figure 6.27: glostars photo page before Figure 6.28: glostars photo page after to change that star color from pick to violet. So for this I find out the code from the project where that star color is given as pink. At last I found out from the css file and then I change it to the color violet (Figure 6.29 6.30). Figure 6.29: Rating color red Figure 6.30: Star color violet So this is the all requirement they give me to solve. I solved all of the bugs and made them happy with my work. 44 Chapter 7 Conclusion and Recommendations 7.1 Conclusion Internship program provides a chance to the students to implement the theoretical knowledge in the tough real world environments. This internship program in 12th Semester arranged by Department of Computer Science and Engineering gives me a chance to implement the theoretical knowledge which has been learned last 3.5 years. This is a new experience which provides the opportunity of self-assessments. What I learn from the internship and why it was important are following •It was a opportunity to “test drive” a career (would I be happier in this platform or should I change my motto) •Accumulating new skills •Gaining a “real world” perspective on an occupation •To gain confidence •Career-relevant internship experience will make a better impression on my resume. •To build motivation and work habits. •To build my network through whom I met in an internship. I hope that, in future this experience will very helpful for my professional life. 45 7.2 Recommendations All this recommendation are based on my personal working experience. 7.2.1 Recommendation to their services •They need to upgrade their website service to attract more clients. •They need to change their System architectural design so that they can make their system faster to attract more customers. •They should add helps and suggestion section for customer to improve service. 7.2.2 Recommendation to software & hardware services •All of the hardware they used is well but they should upgrade it into SSD so that it will more faster than now. •They are totally depending on Microsoft its really well but if they have the scope of open source then it will be more better. 7.2.3 Recommendation to other services •Internet service should be upgraded to increase data speed. •In dhanmondi branch, there should be more employees to decrease work load. •There should be more effectiveness in record keeping. •There is no official website for dhanmondi branch & I think this mandatory for every bank nowadays. •There should be a more effective training program for junior level employee. 46 Acknowledgment At first, I would like to thank my honorable teacher Md Anowarul Abedin Senior Lecturer, Department of Computer Science and Engineering, University of Liberal Arts Bangladesh for his extraordinary effort to make this internship program a success. I want to offer my utmost gratitude to Sajib Saha(CEO) for supervising and guiding me throughout the whole internship period. I greatly indebted to all teachers and staffs of the Department of Computer Science and Engineering and other Departments of the University of Liberal Arts Bangladesh (ULAB)for their kind assistance in accomplishment of the Internship paper. I also want to thank every member in Glostars BD team and others for sharing their valuable time and knowledge with me. They always offered me their helping hands and they encouraged me to improve myself in every aspect by their valuable feedback and advice. Last but not the least; I would like to thank my parents and other family members for their eternal support given to me. 47 Declaration This internship report is submitted to the Computer Science and Engineering, University of Liberal Arts Bangladesh in partial fulfillment of the requirements for the project course of Bachelor of Science. So, I hereby, declare that this internship report is based on the surveys found by me. Materials of work found by other researchers are mentioned by reference. This internship report, neither in whole, nor in part, has been previously submitted for any internship report or course. 48 References [1] Rahman, M. (2018). Startups internationalization: Role of knowledge in the foreign market selection: Case: Glostars Oy. [2] Mistry, R., & Misner, S. (2014). Introducing Microsoft SQL Server 2014. Microsoft Press. [3] Woo, S. W., Alhazmi, O. H., & Malaiya, Y. K. (2006, September). Assessing vulnerabilities in Apache and IIS HTTP servers. In 2006 2nd IEEE International Symposium on Dependable, Autonomic and Secure Computing (pp. 103-110). IEEE. [4] Frederick, B., & Santry, P. (2007). How to cheat at IIS 7 server administration. Elsevier. [5] Taylor, M. (2013). A General Understanding of Microsoft Excel, Visual Studio and Webmatrix2. Paragon Publishing. [6] Code, V. S. (2019). Visual studio code. Recuperado el Octubre de. [7] Lawson, B., & Sharp, R. (2011). Introducing html5. New Riders. [8] Grant, K. J. (2024). CSS in Depth. Simon and Schuster. [9] Silva, L. H., Ramos, M., Valente, M. T., Bergel, A., & Anquetil, N. (2015, March). Does JavaScript software embrace classes?. In 2015 IEEE 22nd International Conference on Software Analysis, Evolution, and Reengineering (SANER) (pp. 73-82). IEEE. [10] Chaffer, J., & Swedberg, K. (2011). Learning jQuery. Packt Publishing Ltd. [11] Hesterberg, T. (2011). Bootstrap. Wiley Interdisciplinary Reviews: Computational Statistics, 3(6), 497-526. 49 [12] Vipul, A. M., & Sonpatki, P. (2016). ReactJS by Example-Building Modern Web Applications with React. Packt Publishing Ltd. [13] Zou, Y., Chen, Z., Zheng, Y., Zhang, X., & Gao, Z. (2014, July). Virtual DOM coverage for effective testing of dynamic web applications. In Proceedings of the 2014 International Symposium on Software Testing and Analysis (pp. 60-70). [14] Singh, A. (2024). Evolutionary architectures in web applications: A comprehensive study of client-server, multi-tier, and service-oriented approaches. [15] Kumar, S. (2019). A Review on Client-Server based applications and research opportunity. International Journal of Recent Scientific Research, 10(7), 33857-3386. [16] Cao, X., Zhang, H., & Shi, H. (2024). Load Balancing Algorithm of API Gateway Based on Microservice Architecture for a Smart City. Journal of Testing and Evaluation, 52(3), 1663-1676. [17] Bakshi, K. (2017, March). Microservices-based software architecture and approaches. In 2017 IEEE aerospace conference (pp. 1-8). IEEE. [18] Alam, B., Doja, M. N., Alam, M., & Mongia, S. (2013). 5-layered architecture of cloud database management system. AASRI Procedia, 5, 194-199. 50