Category Archives: CS-343

CS343 Final Project – Blog 2

On the last blog I had mentioned the painstaking process of getting my sticky header to function correctly and especially so when accounting for the top margin and mobile scaling. I have provided the code below for the sticky header.

 @HostListener('window:scroll', ['$event'])
 onWindowScroll(e) {
   if (window.pageYOffset > 251) {
     let element = document.getElementById('navbar');
     element.classList.add('sticky');
     element.classList.remove('non_sticky');
     if(window.innerWidth <= 850) {
       this.top_padding_var = 87;
     } else {
       this.top_padding_var = 43;
     }
   } else {
     let element = document.getElementById('navbar');
     element.classList.remove('sticky');
     element.classList.add('non_sticky');
     this.top_padding_var = 0;
   }
 }

What this is doing, essentially, is adding the sticky header to the document when past a certain point and removing the non-sticky variant. The toolbar is nested inside a non-sticky div, inside the sticky div, which is present at the top of the page below the header. When scrolling past a certain point the non-sticky version is “swapped” for the sticky variant which is fixed to the top of the page. Here below is the code for this sticky component where you can get a better idea of what I mean by nesting.

<header class="animated fadeInDown" id="navbar">
  <div class="non_sticky" [ngStyle]="{'height':header_height}">
    <app-toolbar></app-toolbar>
  </div>
</header>

You can see here as well that the height of the container for the toolbar is determined by the variable, header_height. I mentioned previously as well that considerations were made for mobile use and this is one. Below is the method that determines this variables value.

resize() {
  if(window.innerWidth <=850){
    this.header_height = 40;
  }
  else{
    this.header_height = 60;
  }
}

Increasing the height makes readability on mobile more effective as well as providing enough space for the buttons to fit in the bar. Some may have noticed a variable being assigned in addition to the sticky-header being added/removed, which highlights another challenge of this particular bit of styling. As mentioned, the sticky header simply swaps in a fixed version of the normal toolbar, but in doing so this new fixed element has a higher z-index and does not “touch” the other elements.

As a result, this new element naturally covers whatever was behind it just a moment ago. To remedy this, I added this variable to the method to dynamically add padding to push the elements on the page back down where they belong. Honestly, it feels like trickery the way everything works together but when it does its nearly seamless unless you know exactly what to look for. In the next blog I will discuss a part of this element that I did not include previously: animations.

From the blog CS@Worcester – Press Here for Worms by wurmpress and used with permission of the author. All other rights reserved by the author.

Final Presentation Eve

With CS 343’s final presentation tomorrow, this will be the last post for this project. (Unless I choose to keep playing around with it later) The work on this project has really helped me learn HTML, CSS, and TS.

The newest feature I added to my Pokedex SPA was having the background colors linked to the selected pokemon’s typing.

This took a bit a time, figuring out how to dynamically link the HTML background color to the TS pokemon data. I eventually found the use of angular’s [ngStyle] to be very useful. This method injects a JSON object with CSS properties defined in it. With it, I simply used a method in the TS to grab the pokemon’s typing and return a created JSON object with the CSS property ‘background’ with either a solid color for single typing or a gradient for dual typing.

This project was a lot of fun and I’ve learned a lot. I am tentatively looking forward to tomorrow’s presentations.

From the blog CS@Worcester – D’s Comp Sci Blog by dlivengood and used with permission of the author. All other rights reserved by the author.

FINAL PROJECT Final BLOG

This week was so stressful, I was preparing for the finals and working on the final project for the CS-343, today we wrapped up everything in the project even the presentation slides. The good thing is I managed to change the buttons style, that was bothering me a lot, but I found out that I … Continue reading FINAL PROJECT Final BLOG →

From the blog CS@Worcester – Shams&#039;s Bits and Bytes by Shams Al Farees and used with permission of the author. All other rights reserved by the author.

Final Project pt.3

After starting work on our front end code we needed to create a method to allow users to search our database for a specific ‘artist’ name or by all artists that contain a specific letter or String entered by the user. For example, if the user input the letter “A” then they would be presented with a list of all artists whose names start with “A”. In order to create this function we needed to start with the backend.

In our Java rest api we needed a get method to search our database. The query in SQLite would be “select * from artists where name like ..%”. The “..%” is where the name of the artist we are searching for would go, but since we want the query to be unique to user input the “%” basically acts as a “don’t care”. This allows for whatever the string is that the rest of it doesn’t need to be specified and all artists will be returned that contain that string. To allow our users to input the string to be searched for we setup the query slightly differently in our backend. We use the query “select * from artists where name like ?”. The question mark acts as an operator to take user input. Then we use the statement:

statement.setString(1, name + ‘%’);

This statement sets the string we’re searching for to the first (and only) input from the user and then adds “%” after the string. Here’s a look at our full method: 

@GetMapping(“/artists/{name}”)

public ResponseEntity<Object> getArtistByName(@PathVariable String name) throws SQLException {

   PreparedStatement statement = 

conn.prepareStatement(“select * from artists where name like ?”);

   statement.setString(1, name + ‘%’);

   ResultSet rs = statement.executeQuery();

   ArrayList<Map<String, String>> results = new ArrayList<>();

   while (rs.next()) {

       Map<String, String> temp = new HashMap<>();

       temp.put(“ArtistId”, rs.getString(“ArtistId”));

       temp.put(“Name”, rs.getString(“Name”));

       results.add(temp);

   }

   return new ResponseEntity<>(results, HttpStatus.OK);

}

Then in our front end Typescript code we connect to the rest api backend with this method:

getArtistsByName(str: string): void {

 this.error = null;

 let tempStr = str.replace(” “, “%20”);

 this.http.get<Artists>(‘http://localhost:8080/artists/&#8217; + str)

   .subscribe(response => {

       this.searchArtist = response;

       console.log(response);

     },

     (error: HttpErrorResponse) => {

       this.error = error;

     }

   );

}

This method allows us to get all the results to the front end so that we can then print the results on our web page for the user to see. We continue to do this by implementing our html code to display these results in drop down lists for the user.

The idea of our project developed into a web page that allows users to search through a database of music artists and their albums and allow the user to select an album that they wish to download. They cannot truly download music from out web page but this is a framework for the idea of a web page with that purpose.

From the blog cs@worcester – Zac&#039;s Blog by zloureiro and used with permission of the author. All other rights reserved by the author.

Final Project

My final project has not been an easy task to deal with thus far. After going far in depth with one of my designs, I came to discover that the use of angular material alongside bootstrap which caused quite a few problems. I have decided to do a full overhaul into angular material. The reason I am choosing angular material is because there seems to be more typescript capabilities while bootstrap seems to be heavy on javascript and css. By going down this path I have been able to make steady progress with my current version of my application which at the time is mostly an interactive sidebar. The main concern I will have this week is being able to make the workouts appear on the home page. I would like to be able to use angular to create a visually appealing layout which will allow for the user to go through the different workouts and select the ones that they would like to use. If I was able to have more time on something like this my end goal would be to add in I/O devices such as being able to print your workout after it has been created. Due to time restraints I will have to remain with simply being able to select and track the wanted workouts on the app. Another large problem I will have to come up with a solution with is whether or not there will be a way to save workouts, or have the workouts appear and when the next desired workout regime is needed, to simply delete the old and then add to the new one. Another issue I have run into is being able to seamlessly add in new workouts to the app without having any effect on the previously existing workouts. This next week will be the time to grind out any and hopefully all of these problems. I have been diving deeper into angular material in order to get a better understanding. I have also been researching more html and css as I have not had much prior experience with these. This has caused me quite a bit of stress because very minute changes have broken the entire app, but I believe that by completing this I will have gained the necessary knowledge of what will be needed in the future. I am excited to complete this app but it is also been an extremely difficult time which will all pay off in the end.

From the blog CS@Worcester – Journey Through Technology by krothermich and used with permission of the author. All other rights reserved by the author.

CS-343 Final Project – Part 3

Over the past week, my work on my CS-343 Final Project has been focused on creating a more interesting layout for my components. I have not changed the function of the program or added any more features yet, but I think I have made some great progress towards making the GUI look more like I planned it to in my wireframe. The program currently looks like this:

I managed to create this layout by making use of Angular’s Grid List material. Using material.angular.io as a reference, I was able to figure out how to import this tool into my project and use it to arrange components with the <mat-grid-list> and <mat-grid-tile> tags in my app.component.html file. By combining this information with what I learned about CSS and HTML last week, I was able to create the layout pictured above.

In addition to working on the layout, I made some major changes to the project’s organization. One significant change was the creation of a new Angular component: the options-menu. Previously, the input forms for changing width and height were simply parts of the app.component.html file. I decided it would make more sense to create a new component so that these options and the new options I plan to add this week will stay organized in my new layout. Another major change I made was in the way data is passed between components. Before, I simply had the input forms in the app component update the size of the rectangle by searching for it by its id. Now, the forms actually pass data from the options-menu to the rectangle using a data service. I decided to implement this method of data sharing after reading about it in this article on angularfirebase.com (see the section on Unrelated Components). I had difficulty understanding how a data service works at first, but I eventually understood it by messing with my own. Creating a data service has definitely made passing data between components far simpler than it was before, and I plan to add more to it this week.

As I am due to present my completed project this Friday, I have less than a week to finish working on it. My plan for this week is to finish adding the features I planned for the project in the beginning. This includes making a simple puzzle game that can be played in the rectangle area, as well as more options to configure it besides the width and height. I would also like to work on cleaning up my layout to make it more visually appealing. Finally, if I have time, I would like to create a back-end server that will allow users to store their scores form playing the game. It seems like a lot to add, but making this layout and creating a data service have only made me more comfortable working with the Angular framework. I think I will be able to complete much of what I have planned in time for Friday.

From the blog CS@Worcester – Computer Science with Kyle Q by kylequad and used with permission of the author. All other rights reserved by the author.

CS343 Final Project – Blog 1

Since this semester began, I’ve known exactly what I wanted to do for my final project, and even before the semester I’ve had this project kicking around my head. Ever since I saw my good friends personal site years ago, I thought it may be exciting to create my own, even before I even considered doing computer science. So, it should be obvious then, when I found out we would be creating a web page for our final project I knew this was the perfect opportunity to finally begin this project.

I knew that this personal – or rather, professional – site would be an interactive resume of sorts, a really incredible showing of capability that I could link to on resumes and in online professional profiles (LinkedIn, Handshake, etc). Consider this exchange:

“Have you done any web development?” asks a potential employer.

“Well sir/madam/neither, if you simply navigate to [web address] you’ll see the extent of that experience”.

“My goodness, this website looks amazing! I have no choice but to make you the president”.

As such it has to look good, like really good, you don’t become the president for nothing (you get it for being related to someone important). So, if I wanted a website that would make someone important adopt me, I needed to perfect the aesthetics of the website. I would need interactive elements and animations, a pleasing color palette, a readable layout, and of course sections on who I am and what my accomplishments are. I will, of course, not be linking this blog to it considering the beginning of this paragraph.

The first element I knew I wanted was a sticky header, or a toolbar that would “stick” to the top of the page once you scrolled down far enough for the top of the toolbar to touch the top of the page. This would mean that users could change page even while far past the header of the site. Another element I wanted was large tiles representing each page that would expand to fit the whole screen when clicked. However, I realized that it was incredible difficult to implement and also redundant considering I already had a way to access any other page at any point a user may be on said page.

I would reach the previous conclusion long after I had already begun, starting with the sticky toolbar. Folks online have implemented similar designs, so I began with those that were most effective and simple as a template. The way it works is actually very clever: a typescript method is used to check the yOffset of the page and if it goes past the offset of top of toolbar the toolbar is changed from a regular element to one that is fixed at the top of the page. As such, the elements on the page below would normally be covered slightly by this bar, however I have it dynamically add to the top-margin of the page to shift the content down appropriately. When this happens, by painstakingly finding the exact right values, it all appears perfectly seamless.

This work took, no joke, 4 hours or more, as I added scaling for page width such that when the page is shrunk horizontally as it would be on mobile the header and toolbar grow in height to accommodate the text and buttons correctly. However, I’ve already gone long on this blog so I will continue in the next one!

From the blog CS@Worcester – Press Here for Worms by wurmpress and used with permission of the author. All other rights reserved by the author.

Final Project pt.2

Zac Loureiro

My last final project blog left off with us having a connection established between Java rest api and a SQLite database. We accomplished this through use of Java imports that were available to us. The next step was finding out how to actually access our database with queries that are sent with our backend Java rest api. We started with a simple get method, in the rest api format it is a @GetMapping method. We were just trying to run a query to get all the ‘artists’ in our database, ‘artists’ being music artists is one of the tables in our database. The query in SQLite would be “select * from artists”. There are a series of methods available with the sql imports in Java to help execute this query using the backend. Here is a look at our complete method:

@GetMapping(“/artists”)

public ResponseEntity<Object> getAllArtists() throws SQLException {

   PreparedStatement statement = conn.prepareStatement(“select * from artists”);

   ResultSet rs = statement.executeQuery();

   ArrayList<Map<String, String>> results = new ArrayList<>();

   while (rs.next()) {

       Map<String, String> temp = new HashMap<>();

       temp.put(“ArtistId”, rs.getString(“ArtistId”));

       temp.put(“Name”, rs.getString(“Name”));

       results.add(temp);

   }

   return new ResponseEntity<>(results, HttpStatus.OK);

}

The line @GetMapping(“/artists”) establishes our path for the rest api. The lines PreparedStatement statement = conn.prepareStatement(“select * from artists”); 

and

ResultSet rs = statement.executeQuery();

are available via the sql imports. The first of these two lines creates the query as a variable “statement” of type “PreparedStatement” within our connection. Then a variable “rs” of type “ResultSet” is set equal to “statement.executeQuery()”. This sets “rs” equal to the result of the query, which in this case is all the artists in the database. Then the data of the artists is loaded into an ArrayList of type Map<String, String> and returned. Returning an ArrayList of Maps is best for functionality when we got to working on our front end code. Since artists had two fields “ArtistId” and “Name”, which are both Strings, saved the data in a Map<String, String> so that both variables were easy to access. This way we could pinpoint any artist in the database when we began to search for specific artists. Our next task was to create methods that allowed our users to search for a specific artist by name. We needed to also add a post method to allow users to add an artist to our database.

From the blog cs@worcester – Zac&#039;s Blog by zloureiro and used with permission of the author. All other rights reserved by the author.

Final Project pt.1

For my final project in my Software construction, design, and architecture class, my partner and I had the idea of creating a web page that was able to access data of a SQLite database. The structure of this project was to connect to a database using Java as a backend and use Rest api to send out sql commands. We needed to run the backend on a server using a Spring Boot framework available to us. Once our connection was setup and our backend methods to access the database was ready we had to create the front end. We used Typescript and Java Angular to create our front end, or in other words our web page. The typescript code had to connect to the Java rest api so our chain of connections from the top goes; Typescript and Angular -> Java Rest api -> SQLite database. 

Starting the project the very first obstacle we ran into was connection Java rest api to the SQLite database. It was something we had never done before, but thankfully there was helpful resources online. We found out that there was a series of Java imports to facilitate this function. A few imports needed are as follows:

import java.sql.*;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

Using these imports we were able to create an object of type ‘Connection’ in order to establish the actual connection to the database. Here is our method:

public static Connection getConnection() {

   if (conn == null) {

       try {

           conn = DriverManager.getConnection(“jdbc:sqlite:” + dbpath);

       } catch (SQLException e) {

           e.printStackTrace();

       }

   }

   return conn;

}

The set method to set our path:

DatabaseSQL.setPath(“C:/…(insert path here)…”);

We are now able to get the connection inside our Java rest api classes that contain our SQLite query methods using this statement:

Connection conn = DatabaseSQL.getConnection();

As I said this information can be found through many sources online so we were lucky such a function was available for us to use at our disposal. We needed the connection to be established before we could proceed with anything else because the entire project relied on accessing the database. However, in order to actually know if our connection was working we couldn’t rely on the absence of errors. We needed to create a rest api method to access the database and give us a result so that we could be sure.

From the blog cs@worcester – Zac&#039;s Blog by zloureiro and used with permission of the author. All other rights reserved by the author.

FPL&S 5: Putting Things Together and Making it Pretty

By now, I’ve become rather accustomed to Typescript, Angular, and even CSS. Once the basic functionality of this project was working, motivation and momentum made it easy to continue adding more features. As evidence 14 out of 21 commits have been made in the past week, and although some are small it shows how easy adding features becomes when you have a good base built.

The database building and making sure it was in sync with file uploads was the most challenging part of this project so far. Two new services were created: one to handle all interactions with the database and another to provide information about the user that is currently logged in. Having Components communicate through a service decouples them from each other and the parent. The Components can simply subscribe to the data they need. This blog post was most helpful in determining the best approach for my needs, but Angular’s documentation filled in the blanks as needed.

An interesting bug I encountered was that uploading a new file overwrote all previous files. This was occurring because I was using the same reference to storage, but a new one is required for each upload. This was a simple solution, but puzzling at first. This was only noticed when I tried deleting a file: other files were still in the database and storage, but the link to all files returned a 404 error.

Then my least favorite part came: improving the UI. I love making things work, but making them flashy and fancy frankly seems like a waste of time, as long as it doesn’t detract from the user experience. Still, I quite enjoyed making it look nicer, despite some frustrations with CSS. The biggest issue I’ve had is CSS styles from outside components affecting the inner ones. I also wish browsers were more standardized. It has been difficult creating a consistent user experience across browsers, save for creating new elements from scratch. In the case of file uploads, for example, it is much simpler to hide the actual element and forward user clicks from a custom text input and browse button.

My last task will be to add some graphs to process information and display it to the user. This is of little use for the project as it stands, but will be incredibly useful for my Independent Study project next semester when I re-brand it. I have to give some credit to the Angular framework for making it easier, but using software engineering principles has allowed for an iterative project. I have a working project at every step with a much bigger end goal in mind.

There is still some polishing I’d like to do, and of course there could always be more features. This project was a great chance to dive into Angular and web development.

From the blog CS@Worcester – Inquiries and Queries by ausausdauer and used with permission of the author. All other rights reserved by the author.