Bhamilton18 Week 7
From LMU BioDB 2017
Contents
Website Downloads
Correction Notes
- While updating our website we looked to our Week 4 Feedback in order to perfect our webpage.
- To begin, Katie and I focused on fixing the broken link for Ensembl in our reference section. This was fixed by replacing the link with the active "summary" link for our gene: ASP1.
- Next, we corrected our folder name from Asp-1 to ASP1. This is to make sure it is the exact same gene we did the project on.
- We corrected the SGD comment about it not have a protein sequence, when it fact it does.
- Lastly, we corrected typos and rewrote our summary paragraph on what we learned.
Week 7 Electronic Notebook
- To begin formatting our page Katie and I put our entire website into a container tag:
<div class="container">
- Putting our code in a container class allowed for the website to be centered on a webpage, as well as, become more readable to a user.
- Next, Katie and I enlarged our header text within in there colored tags using <h3> header code.
- In order to align the DNA and protein sequences we used <pre> tags to create equal spacing among the letters for a more typical presentation of the sequence.
- To complete the ajax sources component of the assignment we began by utilizing the js file from Dr. Dionisio. This file allows a use to click a button and retrieve data from two databases about a particular gene. This code looked as follows:
<div class "container">
<div class="row">
<div class="col-3">
<h2>UniProt</h2>
<div class="d-flex justify-content-between align-items-center">
<button class="uniprot btn btn-primary">Load</button>
<span class="uniprot loading small d-none">Loading…</span>
</div>
</div>
<div class="col">
<textarea class="uniprot form-control" rows="10"></textarea>
</div>
</div>
<hr>
<div class="row">
<div class="col-3">
<h2>YeastMine (SGD)</h2>
<div class="d-flex justify-content-between align-items-center">
<button class="sgd btn btn-primary">Load</button>
<span class="sgd loading small d-none">Loading…</span>
</div>
</div>
<div class="col">
<textarea class="sgd form-control" rows="10"></textarea>
</div>
</div>
</div>
- This code creates a button, and once pushed retrieves data from two sources: UniProt and YeastMine(SGD).
- The code also utilizes a js file that is working with the databases to retrieve information. In order for the database to collect and present information, we had to change the $.get URL.
- This URL is found within our asp1.js file. The code as follows displays how we were able to collect the data.
$("button.uniprot").click(() => {
showLoadingMessage("uniprot");
// Crib sheet: http://www.uniprot.org/help/api_retrieve_entries
$.get("http://www.uniprot.org/uniprot/P38986.xml").done(response => {
console.log("UniProt", response);
$("textarea.uniprot").val(xmlToString(response));
hideLoadingMessage("uniprot");
});
});
- Katie and I chose UniProt and YeastMine(SGD) as our databases in order to observe an xml file and json file.
- In order for our js file to be referenced/used it is necessary to add the following to the end of our html page:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="asp1.js"></script>
- After completeing the ajax portion of the website, Katie and I continued to format our page. We added a flex box layout to our question 2.
<div class="d-flex flex-row">
<div class="p-2">SGD ID:S000002729 <br><a href="https://www.yeastgenome.org/locus/S000002729">SGD Gene Overview</a> </div>
</div>
- Flex boxes allow for groups of information to be manipulated more easily. For example we can take our four sources and reverse order, space out or align all with one word changes to the primary div class tag.
- We created a grid layout for our first question:
<div class="container">
<div class="row">
<div class="col-2 font-weight-bold text-success">Standard Name:</div>
<div class="col-6">ASP1</div>
</div>
- The container class adds the preceding information into a grid layout of the entire page.
- The div class row begins a table and the columns add the necessary data about our gene.
- For our first column the items are colored green and bold to differentiate between data and title.
Acknowledgments
- I worked with my homework partner Katie Wright on collaborating on formatting of the website, typo fixes and general look and feel of the website. We meet in person as well as through texting to discuss how to page should look.
- I utilized Dr. Dionisio's ajax starter files in order to complete the jquery portion of the assignment.
- I also utilized the Bootstrap Website for formatting techniques and stylistic components of the webpage.
References
LMU BioDB 2017. (2017). Week 7. Retrieved October 12, 2017, from https://xmlpipedb.cs.lmu.edu/biodb/fall2017/index.php/Week_7
