Skip to content

Instantly share code, notes, and snippets.

@amandademetrio
Created July 26, 2018 00:00
Source Code for E-Commerce Admin
<div class="row">
<div class="col-sm-12">
<!-- Table with products -->
<table class="table table-bordered" id="products_table">
<thead>
<tr>
<th scope="col">Picture</th>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Inventory Count</th>
<th scope="col">Quantity Sold</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="/static/first_app/images/GABodySuit.png" style="width: 100px;">
</td>
<td>1</td>
<td>The Ribbed Snap Front Body</td>
<td>100</td>
<td>0</td>
<td>
<!-- Button trigger edit modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
<!-- Edit product Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Form to edit product -->
<form method='post' action='/dashboard/products/update'>
<input type='hidden' name='csrfmiddlewaretoken' value='kqFLsvovUTf2Y6TLeFCjqEObckOrnCHosPmIqJPAsAkAdMTJPRZIu17azwCJprjg' />
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="product_name" value="The Ribbed Snap Front Body">
</div>
<div class="form-group">
<label>Picture:</label>
<input type="text" class="form-control-file" name="product_picture" value="first_app/images/GABodySuit.png">
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" class="form-control" name="product_desc" value="This is a bodysuit from Good American. More product description goes here. Look! It&#39;s more product description!">
</div>
<div class="form-group">
<label>Inventory Count</label>
<input type="number" class="form-control" name="inventory_count" value="100">
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" value="100">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary float-right">
</form>
<!-- End of form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Product delete button -->
<a href="/dashboard/products/delete/1" class="btn btn-danger btn-sm" role="button">Delete</a>
</td>
</tr>
<tr>
<td>
<img src="/static/first_app/images/cabanadress.png" style="width: 100px;">
</td>
<td>2</td>
<td>The Cabbana Dress</td>
<td>50</td>
<td>0</td>
<td>
<!-- Button trigger edit modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
<!-- Edit product Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Form to edit product -->
<form method='post' action='/dashboard/products/update'>
<input type='hidden' name='csrfmiddlewaretoken' value='kqFLsvovUTf2Y6TLeFCjqEObckOrnCHosPmIqJPAsAkAdMTJPRZIu17azwCJprjg' />
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="product_name" value="The Cabbana Dress">
</div>
<div class="form-group">
<label>Picture:</label>
<input type="text" class="form-control-file" name="product_picture" value="first_app/images/cabanadress.png">
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" class="form-control" name="product_desc" value="This is a dress from Grey Suede. More product description goes here. Look! It&#39;s more product description!">
</div>
<div class="form-group">
<label>Inventory Count</label>
<input type="number" class="form-control" name="inventory_count" value="50">
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" value="150">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary float-right">
</form>
<!-- End of form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Product delete button -->
<a href="/dashboard/products/delete/2" class="btn btn-danger btn-sm" role="button">Delete</a>
</td>
</tr>
<tr>
<td>
<img src="/static/first_app/images/ipalaceup.png" style="width: 100px;">
</td>
<td>3</td>
<td>LPA Lace Up Dress</td>
<td>200</td>
<td>0</td>
<td>
<!-- Button trigger edit modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
<!-- Edit product Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Form to edit product -->
<form method='post' action='/dashboard/products/update'>
<input type='hidden' name='csrfmiddlewaretoken' value='kqFLsvovUTf2Y6TLeFCjqEObckOrnCHosPmIqJPAsAkAdMTJPRZIu17azwCJprjg' />
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="product_name" value="LPA Lace Up Dress">
</div>
<div class="form-group">
<label>Picture:</label>
<input type="text" class="form-control-file" name="product_picture" value="first_app/images/ipalaceup.png">
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" class="form-control" name="product_desc" value="This is a dress from LPA. More product description goes here. Look! It&#39;s more product description!">
</div>
<div class="form-group">
<label>Inventory Count</label>
<input type="number" class="form-control" name="inventory_count" value="200">
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" value="200">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary float-right">
</form>
<!-- End of form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Product delete button -->
<a href="/dashboard/products/delete/3" class="btn btn-danger btn-sm" role="button">Delete</a>
</td>
</tr>
<tr>
<td>
<img src="/static/first_app/images/versaciblackdress.png" style="width: 100px;">
</td>
<td>4</td>
<td>Versaci Black Dress</td>
<td>100</td>
<td>0</td>
<td>
<!-- Button trigger edit modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
<!-- Edit product Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Form to edit product -->
<form method='post' action='/dashboard/products/update'>
<input type='hidden' name='csrfmiddlewaretoken' value='kqFLsvovUTf2Y6TLeFCjqEObckOrnCHosPmIqJPAsAkAdMTJPRZIu17azwCJprjg' />
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="product_name" value="Versaci Black Dress">
</div>
<div class="form-group">
<label>Picture:</label>
<input type="text" class="form-control-file" name="product_picture" value="first_app/images/versaciblackdress.png">
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" class="form-control" name="product_desc" value="This is a dress. This is a dress. This is a dress. This is a dress.">
</div>
<div class="form-group">
<label>Inventory Count</label>
<input type="number" class="form-control" name="inventory_count" value="100">
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" value="100">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary float-right">
</form>
<!-- End of form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Product delete button -->
<a href="/dashboard/products/delete/4" class="btn btn-danger btn-sm" role="button">Delete</a>
</td>
</tr>
<tr>
<td>
<img src="/static/first_app/images/cicadaearrings.png" style="width: 100px;">
</td>
<td>5</td>
<td>Cicada Earrings</td>
<td>30</td>
<td>0</td>
<td>
<!-- Button trigger edit modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
<!-- Edit product Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Form to edit product -->
<form method='post' action='/dashboard/products/update'>
<input type='hidden' name='csrfmiddlewaretoken' value='kqFLsvovUTf2Y6TLeFCjqEObckOrnCHosPmIqJPAsAkAdMTJPRZIu17azwCJprjg' />
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="product_name" value="Cicada Earrings">
</div>
<div class="form-group">
<label>Picture:</label>
<input type="text" class="form-control-file" name="product_picture" value="first_app/images/cicadaearrings.png">
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" class="form-control" name="product_desc" value="This is a pair of earrings. This is a pair of earrings. This is a pair of earrings.">
</div>
<div class="form-group">
<label>Inventory Count</label>
<input type="number" class="form-control" name="inventory_count" value="30">
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" value="10">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary float-right">
</form>
<!-- End of form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Product delete button -->
<a href="/dashboard/products/delete/5" class="btn btn-danger btn-sm" role="button">Delete</a>
</td>
</tr>
<tr>
<td>
<img src="/static/first_app/images/converseshoes.png" style="width: 100px;">
</td>
<td>6</td>
<td>Converse Shoes</td>
<td>20</td>
<td>0</td>
<td>
<!-- Button trigger edit modal -->
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#editModal">Edit</button>
<!-- Edit product Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Form to edit product -->
<form method='post' action='/dashboard/products/update'>
<input type='hidden' name='csrfmiddlewaretoken' value='kqFLsvovUTf2Y6TLeFCjqEObckOrnCHosPmIqJPAsAkAdMTJPRZIu17azwCJprjg' />
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" name="product_name" value="Converse Shoes">
</div>
<div class="form-group">
<label>Picture:</label>
<input type="text" class="form-control-file" name="product_picture" value="first_app/images/converseshoes.png">
</div>
<div class="form-group">
<label>Description:</label>
<input type="text" class="form-control" name="product_desc" value="Shoes. These are shoes. Look at the shoes.Shoes. These are shoes. Look at the shoes.Shoes. These are shoes. Look at the shoes">
</div>
<div class="form-group">
<label>Inventory Count</label>
<input type="number" class="form-control" name="inventory_count" value="20">
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" name="price" value="50">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary float-right">
</form>
<!-- End of form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Product delete button -->
<a href="/dashboard/products/delete/6" class="btn btn-danger btn-sm" role="button">Delete</a>
</td>
</tr>
</tbody>
</table>
<!-- End of table with products -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment