User Tools

Site Tools


cs444jc:webapps:progress

Progress Log

Adapt or replace the following table as you see fit:

Date Log File/Extra Resources
Sept 06 Intro to Bootstrap: Containers and Grid Layouts
Today I covered the intro topics to Bootstrap from the TutorialRepublic Bootstrap Tutorial. These topics mainly focused on Bootstrap itself, the links/scripts to include in .html files to support it, Bootstrap containers, and Bootstrap grid layouts. Bootstrap itself is a mobile-first web dev framework that can be used by only inserting class types into HTML elements. It requires only one link and a few script files of Bootstrap itself, Popper, and jQuery to function properly.

Bootstrap containers are very useful and easily-used classes for divs. They span the entire width of the screen by default, and they have individual classes based on screen width. These determine at what point they change from spanning the entire width of the screen to just some of it. Along with this, Bootstrap has a .container-fluid class that always spans the entire screen width (which could probably be useful for making custom navbars).

Bootstrap grids form rows, and within these rows, up to 12 columns per row. These columns have classes that can specify the width the developer wants them to have. Bootstrap grids can also change based on screen size, so that different screen sizes can have different designs due to different column sizes of the containers.
ZIP of Notes/Examples
Sept 15 Website Example With Bootstrap
This week I looked into the Bootstrap website's official docs for example sites and layouts they have for different page types. These range from anything to product advertising on a main page, checkout pages, pricing pages, support pages, among other things. I took the time to combine and look at some of the inner workings of these designs, mainly focusing on designing the navbar on the pages, so that they are responsive to size changes and have a working dropdown menu.

This encompasses most of the functionality of Bootstrap, and any other things you might want for a webpage are available on the Bootstrap website with example code and everything.
ZIP of Example Website
Sept 22 Basics of React: Learning JSX
This week I took the time to start looking into an introduction in React. That started with learning JSX, a language used to simplify the process of developing React web apps. JSX is naturally integrated into JS, and JS objects can be created from JSX expressions. These JSX expressions bear the resemblance of HTML code, and have fitting types (<div>, <p>, <h1> to name a few) along with typical HTML element attributes like id, value, and href.

I learned JSX through Codecademy's React tutorial. Next week I will get into learning more about React components (reusable JSX expressions that can be rendered any number of times in different places through the React DOM). The goal for the next two weeks is to get a strong enough basis of understanding to develop a rudimentary but functional application using React.
ZIP of Notes
Sept 29 Learning About React Components and Props
This week I started learning about React components and props. Components are individual classes with JSX expressions and other data stored within them. Components are subclasses of the React.Component class, and they can have their own functions in order to give them an extra layer of expressiveness. These components can hold multiple HTML elements, and can dynamically display data based on values passed to them through props.

Props are JSON objects that store data about different values held by a certain React component. Values are passed to these props through “attributes” like in HTML elements (<Component name=“Cody” val=“cool”/>). They can be called on by other components to create dynamic systems of components that all depend on each other.
ZIP of Notes
Oct 06 Creating User Login/Registration App with React
This week I attempted to create a user login/registration app with React. It was a lot harder to implement than I originally thought it would be, since it seemed like a new problem popped up for every simple change or addition I made. Along with that, getting the app in a state where React and JSX were usable took over an hour alone. However, I was able to get two form components (one for account creation, the other for login) created, along with buttons to toggle them.

From here, I still need to set up the connection to the SQL server and set up the SQL commands that will create/fetch the user's login info depending on if they're creating an account or logging in. I think this will be done using PHP. A file with my progress is in the ZIP file included.
ZIP of Current React App Build
Oct 13 Finishing User Login/Registration App with React
This week I finished up the creation of the user login/registration app using React, Ajax, MySQL, and PHP. I made the React components submit Ajax requests to a PHP file, which queried the MySQL database to create user accounts or check if they already existed. Much of this worked pretty well, but I did have issues with Brackets's live preview mode. Initially, I was testing my PHP page in the live preview, but Ajax couldn't connect to the file in the session created by the live preview. I'm not sure why it didn't work there, but I placed the project in Apache's /htdocs directory and it worked fine. After that, I had small hiccups with remembering SQL queries, but it is all functional in a rudimentary manner now.
ZIP of Complete React App
Oct 20 Intro to Angular, Typescript, and Angular Components
This week I started learning about Angular JS. Angular involves other languages that the earlier frameworks do not. It uses Typescript (a version of Javascript with variable types and scopes) to create Angular components. Angular, like React, is built on components. However, Angular components behave similarly to React components. Unlike React components, Angular components have to have three main parts in order to function properly. These are HTML elements, decorators, and classes. Angular components use HTML elements to inject their values in place of things like usernames, current articles, etc. These elements pull the values you inject from the component's class defined in the Angular project's Typescript file. Lastly, the decorators are used to hold metadata for the components.
I plan on going over more about Angular next week, so that I have a better understanding of it.
ZIP of Angular Notes
Oct 27 Learning More About Angular and Components
This week I switched Angular tutorials and started learning more about Angular and its components from Angular's official tutorial. I covered the first two sections of the tutorial, which gave a good outline on creating projects, components, and the relationship between the files it create with the Angular CLI tool. I also learned about the typical functionality of decorators, the creation of Angular components, ways of importing packages/libraries into Angular projects, and how to display content in lists dynamically.

Ultimately, it was easier to learn from this tutorial due to the pacing than the other one I was using previously, but their instructions weren't detailed enough in some parts. Angular overall seems more convoluted than development in React, but has a lot more structure and an easier way of connecting the Typescript components to what actually appears in HTML.
ZIP of Notes from this week, Angular Heroes example is too big to compress (around 300MB)
Nov 03 Mock Database Integration/Finishing Angular.io Tutorial
This week I completed Angular's heroes app tutorial and changed it to an animals example app. My intentions were to only add the mock, in-memory database and avoid the other tutorial steps (3 through 5). However, they were pretty instrumental in the overall functionality of the example app, so I needed to cover those too.

The integrated database part of this application is held in a .ts file called in-memory-data.service.ts. This service file acts as a database where the animal.service.ts acts as an API to query it. the animals component then loads an instance of the AnimalService and gets all the animals from the list. These are then displayed on the webpage, and the pseudo-database in the .ts file can be queried to get, add, and remove these animals through the AnimalService service.
No files to turn in. Project is too big to upload.
Nov 10 Getting Started with Phoenix
This week I got started learning about Elixir's Phoenix web framework. Phoenix is more complicated fundamentally than React and on par with Angular, comparatively. Phoenix, however, is more streamlined with routing and setup for different pages. Along those lines, there are 4 major layers of a Phoenix web application to know: endpoints, routers, controllers, and views.

Endpoints contain the common and initial path that all requests to the web application go through. Things affecting all requests go to the endpoint.

Routers are responsible for dispatching URL verbs/paths (verbs are GET, POST, etc and paths are /, /cart, /help, etc) to controllers. The routers allows the Phoenix programmer to control scope to different functionality. i.e. some pages on a site may require user authentication and some might not.

Controllers retrieve request information to one directory and prepare data for the presentation layer.

Views (the presentation layer) handle the structured data from the controller and convert it visually, so that it can be shown to the user.

We can also recognize parts of a URL and have them be converted to usable parameters in our app that display to the user. By doing something like this (get “/hello/:messenger”, HelloController, :show) with a path, we can display the value given to the atom :messenger and have it display the string in the show page's show.html.heex view file. To do this, we add the Elixir interpolation tag <%= @messenger %>, where @messenger is the string given in the URL.
ZIP of Notes
Nov 18 Phoenix Plugs, Routing, Controllers, and Views/Layouts/Templates

This week I spent a lot of time covering Phoenix plugs, routing/routers, controllers, and views/layouts/templates. All of these tools combine to make a Phoenix application function in different ways at varying levels of abstraction. It presents visualization layers where data is filtered by plugs, fed through routers into controller functions (or actions) that send data to views to be rendered on a page.

This process has a lot of moving parts, but each of them are straightforward. However, all these parts are very difficult to piece together when attempting to control a webpage and make it do what you want. For more details about the differing tools and functionality of each layer, please look at the notes provided.
ZIP of notes... a lot of them
Nov 29 Phoenix LiveView Tutorial and Basics

This week I learned about LiveView, Phoenix's way to show real-time changes to views to the user. The tutorial I watched here went through an example of creating a LiveView web page for dimming/brightening a light. This introduced the new route macros needed to create LiveView pages (instead of “get '/path', PathController”, you would use “live '/path', PathLive”). Additionally, this showcased the new directory for LiveView modules, which go in a app_web/live/ directory.

LiveView modules create a process for modifying dynamic values rendered on the page in real time. In order to work with this process and update its contents, three LiveView functions were introduced for modifying the state of the LiveView process through the use of a socket.

First, the mount/3 function assigns the initial state of the LiveView process to that defined in the function. This is where variables are first created that can be changed in the later two functions.

Second, the render/1 function is responsible for rendering the live view in the web browser in real-time. It does this by interpolating values from the socket into an HTML template defined inline (with ~L“”“ ”“”) or in a separate file. HTML attributes defined for a live view page can define a LiveView-specific attribute called phx-click, which creates an event to be handled by a handle_event/3 function where the first parameter corresponds to the value held in the attribute. Ex: phx-click=“on” → def handle_event(“on”, _, socket).

Lastly, handle_event/3 handles click events by matching them with keyword parameters specified by calls to phx-click in the rendered template. This function is used to assign or update new values to variables held and declared in the socket (from mount/3).
ZIP of Notes
cs444jc/webapps/progress.txt · Last modified: 2021/11/29 15:02 by johnscl1