It's here
The starter kit you have been waiting for is finally here. You are actually using it or viewing it now.
What is included?
In this starter kit you will see examples of how to do certain things in Umbraco such as:
- A Bootstrap carousel using Nested Content in the backend.
- A Bootstrap navigation menu with dropdowns.
- Pretty links, you can create links as content items. See 'Links' in the navigation menu.
- Contact form which uses Ajax
- Simple search to help users find content on your site.
Want to learn more?
If you enjoy using this starter kit and would like to learn more about how I create Umbraco sites, visit my website codeshare.co.uk or check subscribe to my YouTube channel.
using System.Data.Entity;
public class BookAppContext : DbContext
{
public BookAppContext() : base("BookDb") // name_of_dbconnection_string
{
}
// Map model classes to database tables
public DbSet<Book> Books { get; set; }
public DbSet<Review> Reviews { get; set; }
}
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
var contactApp = new Vue({
el: '#customerApp',
data: {
baseUrl : "http://bernardgabon.somee.com", //"http://localhost:8080",
columnHeader: ['Id', 'Name', 'Email', 'Phone', 'Action'],
customers: [],
newItem: {},
editItem: {},
deleteItem: {},
detailItem: {},
searchKeyword: "",
},
methods: {
getCustomers: function () {
axios.get(this.baseUrl + "/api/customer")
.then((response) => {
this.customers = response.data;
});
},
postCustomer: function (e) {
e.preventDefault();
axios.post(this.baseUrl + "/api/customer", this.newItem)
.then((response) => {
//alert('Successfully added. Data: ' + JSON.stringify(response.data));
this.getCustomers();
$("#addModal").modal('hide');
this.newItem = {};
});
},
editCustomer: function (index) {
this.editItem = this.customers[index];
},
updateCustomer: function (e) {
e.preventDefault();
axios.put(this.baseUrl + "/api/customer", this.editItem)
.then((response) => {
this.getCustomers();
$("#editModal").modal('hide');
this.editItem = {};
});
},
deleteCustomer: function (index) {
var yes = confirm('Are you sure?');
if (yes) {
this.deleteItem = this.customers[index];
axios.delete(this.baseUrl + "/api/customer/" + this.deleteItem.Id)
.then((response) => {
this.getCustomers();
this.deleteItem = {};
});
}
},
getCustomer: function (index) {
this.detailItem = this.customers[index];
axios.get(this.baseUrl + "/api/customer/" + this.detailItem.Id)
.then((response) => {
this.detailItem = response.data;
$("#detailModal").modal('show');
});
},
searchCustomers: function () {
if (this.searchKeyword) {
axios.get(this.baseUrl + "/api/customer?keyword=" + this.searchKeyword)
.then((response) => {
this.customers = response.data;
});
}
else {
this.getCustomers();
}
},
},
mounted: function () {
this.getCustomers();
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">A Bootstrap 4 Starter Template</h1>
<p class="lead">Complete with pre-defined file paths and responsive navigation!</p>
<ul class="list-unstyled">
<li>Bootstrap 4.3.1</li>
<li>jQuery 3.4.1</li>
</ul>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.slim.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
[
{
"Id": 1,
"LastName": "Gabon",
"FirstName": "Bernard Dela",
"Email": "hewbertgabon@gmail.com",
"Phone": "09988241543"
},
{
"Id": 2,
"LastName": "Gabon",
"FirstName": "Stephanie",
"Email": "yuberto.gabon@gmail.com",
"Phone": "+639124625287"
},
{
"Id": 3,
"LastName": "Locsin",
"FirstName": "Michael",
"Email": "mykz@gmail.com",
"Phone": null
},
{
"Id": 4,
"LastName": "Gabon",
"FirstName": "Zoey",
"Email": "yuberto.gabon@gmail.com",
"Phone": "8888888888"
},
{
"Id": 5,
"LastName": "Nicolai",
"FirstName": "Mardridan",
"Email": "niks@gmail.com",
"Phone": "043834584358"
},
{
"Id": 7,
"LastName": "Caibigan",
"FirstName": "Rich",
"Email": "cai@gmail.com",
"Phone": "099988766"
}
]
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);