Beginner - Need help with bootstrap template

Planet Earth
1

Hi everyone!
I am currently working on a project for class where I want to add in this theme : http://startbootstrap.com/template-overviews/business-casual/[1]

I’m using Meteor and Aptana Studio to execute this project but I am fairly new to this all and would like your help
.
I named my project “hero” so Meteor gives me “hero.html, hero.css, and hero.js” that I can edit within Aptana. However, I do not understand how to add in the template I want so that I can start adding in sample data to show my class how everything will work and look.

If anyone could dumb it down for me, that would be awesome. I am so confused on how to combine the template’s 4 html files, 3 css files, and 3 js files with the original 3 that Meteor made for me already.

2

Okay, here we go:

  1. You dont really need the *.css and *.js file at first
  2. I prefere this file structure (if you only want to demonstrate the template the client folder should be enough)
  3. Many of the basics can be found here
  4. If you give me a couple of minutes, I can give you some code to start with
1 Like
3

Here you go!
If you need more help, just let me know.

2 Likes
4

I am also working on this project. Can you explain in greater detail what you sent us and how to implement it? We are beginners so we really need a step by step explanation. We have gone through the tutorial in class but we are still having difficulty understanding how to use meteor.

5

I have tried doing the folder format structure like you did and copied it like you did on github.

I tried seeing it on localhost but it did not work. Do I have to put these files in Aptana somehow and then it will work on localhost?

6

I ll add some more details to the github repository in a couple of hours. I ll update you here :slight_smile:

7

I updated the readme on the repository. If you have more questions, feel free to ask.

8

Thank you so much! You are very helpful and I appreciate it a lot. We got it to work on one of our computers and we are finally able to input our sample data.

I just had a question about the pages involved. Is it possible to add another page? The template comes with 4 sample pages already but we might need more to fulfill our professor’s criteria. We are making an app involving local deals to save money at bars, restaurants, clothing, etc. But we are trying to add in a “concerts” section.

Another question we had is how to make a log in page. Is that possible as well so that the consumer could have a more personalized experience? Does meteor allow you to log into your facebook account or google account?

9

Yesm it is possible to add another page. Just take, for example, the blog.html als a reference. To create a new page you would have to create another file <your-new-page>.html in client/views. Then you would have to create the <template>-tag (see other pages) and fill it with your content. And remember to give the <template>-tag a name attribute (e.g. name="<your-new-page>"). Next, you will need to add the routing for the new page. Go to /client/lib and open routes.js. Now you can copy the route definition from one of the other routes an simply swap the names with the ones from your new page. This should look similar to this:

FlowRouter.route('/<your-new-page>', {
  action: function(params) {
    BlazeLayout.render("<your-new-page>", {
      area: "content"
    });
  }
});

The last step would be adding your new page to the navigation. Open /client/views/navigation.html and manipulate the navigation. You only need to add a new list element (<li>) to the existing list (<ul class="nav navbar-nav">. The list element should lokk something like:

<li>
  <a href="{{pathFor '/<your-new-page>'}}"><your-new-page></a>
</li>

The part in the brackets ({{ ... }}) needs to be the same as you defined your new route in the routes.js file. The second <your-new-page> can be anything you want.

For your second question: Yes, it is possible. Are you planning on building a fully functional application? With a backend?

PS: If you need anything, like log in functionality and/or other 3rd party things, you can search for a package at atmospherejs.com. There is mostlikely a package :slight_smile:

10

Awesome! I will try creating new pages today and let you know how everything goes with that.

Thank you for looking up the login functionality for us. Does this mean that we could connect it to a personal profile page? We wanted the users to be able to save any discounts or events they like so that they could be notified when the event is happening but we feel like it would be pretty difficult.

Do you know of any good filtering options? We expect to have at least 5 “deals” per section but we think it would be cool to have the option to choose a price range, a location range, and age range. Like to tag each post with characteristics that the user can filter which ones he wants in an event.

I did research on the google maps API for the location aspect of it. Do you recommend this map or a different one?

Thanks so much again :slight_smile:

11

Would you recommend this for filtering: https://atmospherejs.com/doctorpangloss/filter-collections

We want to tag the posts we make so that if someone wanted to go to a happy hour by a place only 5 miles away from them, they could easily filter out the deals going on by him.

12

Yes, you can create user profiles very easy. However, this will need backend javascript from you. I dont know how well you can write javascript. Meteor gives you the possibility to do everything you mentioned in an easy way (login, user profiles, save stuff, notify users, … ).

Filtering comes with the storage stuff. I suggest you read this and this to understand how the database works und how you can send data to the client (browser). Additionally the tutorial gives a pretty good introduction into collections and server side functionality.

For the localization: I am like 80% sure googlemaps is not for free (at some point). There are other possibilities like this OpenLayers package to display maps. For geolocation there is Meteor standard package. To be honest, I have never used one of them, so I cant tell how hard it is to use them.

EDIT: this might be helpful

13

That might work, yes.

14

Hello!

Just wanted to update you on everything. We ended up getting an A in the class and the professor liked our project a lot. None of this would have been possible without you helping us. We appreciate all the advice you gave us and how patient you were with us.

We thank you so much for everything.

Would it be possible for us to send you a card and an edibles arrangement or is there any other projects you’re working on that would require funding? We want to show that we appreciate all that you have done for us. :blush:

15

Thats great! It is always appreciated to hear if something worked out :smile:
There is no need to send me something, just make sure to help others if they need help! Maybe you got the hang of Meteor and will stay in the community :wink: