-
- What is DG3
- The different components
- Requirements for running DG3
- Installation of DG3
- Additional installation steps
- Select which web server to use
- Hello World application
- Intro to CMS
- Setting up DG3 as a CMS
- Editing pages
- More about pages and urls
- Structuring a page using the grid
- Adding menu to pages
- Add images to the application
- More formating
- Sending email from contact us
- Adding menu to template
- Deploy the web site
- Storing the pages in database
- Create record
- Auto fill field
- Field validation
- Enable save button validator
- Add new button to template
- View document
- List documents
- Fix selection in menus in template
- CRUD Create Read Update Delete
- Intro to blogs
- Add user authentication
- Bootstrap authentication
- Let user change their passords
- Add reset password
- Login dialog box
- Extending the CMS to a blog
- Extend table for blogging
- Edit blog entry
- View blog entry
- User registration
- User password validation
- User field validation
- User auto login
- User extra registration fields
Add new button to template
To be able to create new pages, we want to add a new article button to the template. This is where and how.
<ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/cms/editarticle/">New article</a></li> </ul> </li> </ul>
The added link that will create a new page. The place for it is right after the </ul> with the other links. This will create an action button to the far right with one action for creating new pages. You probably could managed fine with just another link direct in the menu, but this action can expand to more and more actions as we add to the solution.
How the full nav bar looks like:
<nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">DG3 by Example</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="{% if current == "landing" %}active{% endif %}"><a href="/landing/">Home</a></li> <li class="{% if current == "about" %}active{% endif %}"><a href="/about/">About</a></li> <li class="{% if current == "contact" %}active{% endif %}"><a href="/contact/">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/cms/editarticle/">New article</a></li> </ul> </li> </ul </div> </div> </nav><br>